Vertical align not working on inline-block

18
votes

I was told that:

Vertical align only works for inline,inline-blocks,images,and table elements.
It has to be applied on the child element, as oppose to the parent element, unlike text-align.

However, when I tried to set vertical align middle on an inline-block element, it didn't work. Why?

#wrapper {
border: 1px solid black;
width: 500px;
height: 500px;
}
#content {
border: 1px solid black;
display: inline-block;
vertical-align: middle;
}
<div id = 'wrapper'>
<div id = 'content'> content </div>
</div>
3
htmlcssinlinevertical-alignment
@Oriol I meant middle. And before you ask, yes, middle is a valid value. w3schools.com/cssref/pr_pos_vertical-align.asp And what do you mean by line box? – frosty
@Oriol Also, I'm not looking for a different way to do this. I'm just looking for an explanation for why this doesn't work, so please take off the duplicate mark. – frosty
@Oriol If I'm understanding this correctly, are you referring to #content as the line box? Because there's only 2 elements here, the #wrapper, and #content. – frosty
@Oriol ...Okay, so line boxes only exist when there are more than 1 inline, or inline-block elements in a single parent container? But they are invisible, right? Basically, every row of inline-block elements is a line box? If I'm understanding this correctly? – frosty

3 Answers

30
votes

It doesn't work because vertical-align sets the alignment of inline-level contents with respect to their line box, not their containing block:

This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

A line box is

The rectangular area that contains the boxes that form a line

When you see some text which has multiple lines, each one is a line box. For example, if you have

p { border: 3px solid; width: 350px; height: 200px; line-height: 28px; padding: 15px; }
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

enter image description here

If there is only a single line, like in your case, it's also a line box

enter image description here

Using vertical-align: middle centers .content vertically inside that line box. But the problem is that the line box is not vertically centered inside the containing block.

If you want to center something vertically at the middle of the containing block see How to align text vertically center in div with CSS?

5
votes

Vertical-align on inline / inline-block element, images, text... align element together, not with parent.

Usage example: align smiley image in a text

you can cheat by adding a 0px width, 100% height pseudo-element

#wrapper {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    vertical-align: middle;
}
#wrapper:after{
    content: '';
    display: inline-block;
    width: 0px;
    height: 100%;
    vertical-align: middle;
}
#content {
    border: 1px solid black;
    display: inline-block;
    vertical-align: middle;
}
<div id = 'wrapper'>
    <div id = 'content'> content </div>
</div>
2
votes

It work for me by using vertical-align:text-top;

<div class="box">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div>
<div class="box">
    Lorem ipsum dolor sit amet, diam nonummy nibh 
</div>
<div class="box">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
</div>

.box {
   display: inline-block;
   width: 20%;
   margin: 5px;
   padding:10px;
   border-top: 5px solid #000000;
   vertical-align: text-top;
}

jsfiddle