<div class="bordered" style="height: 300px; text-align: center">
<div class="bordered inline-blocked" style="height: 100px; vertical-align: middle">XXX</div>
<div class="bordered inline-blocked" style="height: 200px; vertical-align: middle">YYY</div>
</div>
Divs XXX and YYY are vertically centered one relative to each other, i.e. they are one on horizontal line, but not vertically-centered relative to container. Thats what I want.
Now the question:
If I change one of the two vertical-align properties strange things wil happen.
- I remove XXX vertical-align property. Result: XXX is moved downside and positioned aligned to nothing. YYY stays the same.
- I set YYY vertical-align property to 'top'. YYY remains on its place, XXX is aligned with the top of YYY despite its own value is still 'middle'.
- I set YYY vertical-align property to 'bottom'. YYY remains on its place, XXX is aligned with the bottom of YYY despite its own value is still 'middle'.
I always thought that when there are several inline elements in a line they form a line of inline boxes, and all that vertical-align values are applied relative to that box, i.e. inline boxes are vertically-positioned by v-a property not inside its parent, but inside the line of inline boxes inside parent, i.e. inside the line of their siblings.
Therefore, if I set XXX property to 'middle', and YYY to 'bottom' then it should be exactly the same as in case both of them are set to middle, because the size and position of imaginary inline box is not changing. But in fact I cannot vertically center these boxes if BOTH of them are not vertically-aligned to middle.
So could you please explain whats going on in this simple example?
Another thing I cannot get is how positioning in this example is affected with line-height property.
ANSWER:
Unfortunately, vertical-align: middle will not align the inline element to the middle of the largest element on the line (as you would expect). Instead, a value of middle will cause the element to be aligned with the middle of a hypothetical lower-case “x” (also called the “x-height”). So, it seems to me that this value should actually be called “text-middle” to correctly identify what it does. Blockquote
from http://www.impressivewebs.com/css-vertical-align/, thanks to both prash and brains911.
ADVISE:
if messing with vertical-align add some text to your container - it will show the baseline which is used for align.
