Skip to main content
GameDev.net gamedev.net
🔒 Locked

[web] Possible to vertically centre a div tag inside another div tag?

Started by johnnyBravo Mar 10, 2005 at 10:24 PM 2 replies 1k views
Original Post
johnnyBravo
johnnyBravo
Hi, I've got an outer div tag at a certain size, and i got another div tag inside it that I want to be centered horizontally and vertically. i was able to horizontally center it using text-align style, but I can't work out how to vertically align it. Any ideas? Thanks
Etnu
Etnu
I'm still trying to figure out why vertical-align is so borked.

Per the w3c docs:

vertical-align:

baseline
Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom margin edge with the parent's baseline.
middle    Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.sub    Lower the baseline of the box to the proper position for subscripts of the parent's box. (This value has no effect on the font size of the element's text.)super    Raise the baseline of the box to the proper position for superscripts of the parent's box. (This value has no effect on the font size of the element's text.)text-top    Align the top of the box with the top of the parent element's font.text-bottom    Align the bottom of the box with the bottom of the parent element's font.<percentage>    Raise (positive value) or lower (negative value) the box by this distance (a percentage of the 'line-height' value). The value '0%' means the same as 'baseline'.<length>    Raise (positive value) or lower (negative value) the box by this distance. The value '0cm' means the same as 'baseline'.
---------------------------Hello, and Welcome to some arbitrary temporal location in the space-time continuum.
konForce
konForce
Quote:
5.4.4 'vertical-align'

Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom |
Initial: baseline
Applies to: inline elements
Inherited: no
Percentage values: refer to the 'line-height' of the element itself

The "vertical-align" aligns inline elements with each other. It has nothing to do with aligning child elements within their parent block.

So, browsers do not implement it incorrectly. It's just not what you (and many people) think it is.

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.

Sign in to reply to this topic.