By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,463 Members | 2,954 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,463 IT Pros & Developers. It's quick & easy.

Centering a DIV within a DIV?

P: n/a
Hello,

me again. This time I'd like to align a DIV both horizontally and
vertically centered within a larger DIV.

The only alignment-relevant CSS property I could think of was
text-align, and that didn't work.

Of course I could put the DIV into a one-cell table and use the td's
align and vertical-align attributes, but let's assume I don't want to
use tables for that type of stuff.

Thanks,
robert
Oct 27 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
On 27 Oct 2005 14:31:41 GMT,
Robert Latest <bo*******@yahoo.com> wrote
in Msg. <3s************@individual.net>
me again. This time I'd like to align a DIV both horizontally and
vertically centered within a larger DIV.


I just found the negative-margin trick. Kinda ugly, but works well
enough.

Thanks,
robert

Oct 27 '05 #2

P: n/a
Els
Robert Latest wrote:
On 27 Oct 2005 14:31:41 GMT,
Robert Latest <bo*******@yahoo.com> wrote
in Msg. <3s************@individual.net>
me again. This time I'd like to align a DIV both horizontally and
vertically centered within a larger DIV.


I just found the negative-margin trick. Kinda ugly, but works well
enough.


Only until the viewport becomes smaller than the inner div.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Oct 27 '05 #3

P: n/a
Robert Latest wrote:

Hello,

me again. This time I'd like to align a DIV both horizontally and
vertically centered within a larger DIV.

The only alignment-relevant CSS property I could think of was
text-align, and that didn't work.

Of course I could put the DIV into a one-cell table and use the td's
align and vertical-align attributes, but let's assume I don't want to
use tables for that type of stuff.


For horizontal centering, the inner DIV should have the following
style:
margin-left: auto;
margin-right: auto;
width: nn%;
where nn is the desired width as a percentage of the width of the
outer DIV. I do this all the time.

For vertical centering, try doing the same with margin-top,
margin-bottom, and height. I have never done this, so I'm not sure
of the results.

--

David E. Ross
<URL:http://www.rossde.com/>

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <URL:http://www.mozilla.org/>.
Oct 28 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.