Why vertical-align CSS property not working and does not put span in middle height of its parent?

Question

I have hard time understanding vertical-align property for some time now, and I haven't successfully managed to apply that, so I decided to write here.

Having simple markup

<div class="parent">
  <span class="text">Some text centered here
</div>

and

.parent{
  height:100px;
  background-color:red;
  .text{
    vertical-align:middle;
    background-color:green;
  }
}

results in

why span is not centered in parent container? To what exactly this property applies to?

Code pen for you:

https://codepen.io/anon/pen/wXYoBO

Please be aware that I am not asking here how to center element in div, but why this particular css property does not work as common sense would suggest me to.

Here, vertical-align starts to take affect https://codepen.io/anon/pen/QxZpYP

Answer 1

If you want to use vertical-align: middle it needs to be combined with display: table-cell and applied for parent and I would not recommend this solution, however below is your code, fixed, and some other solutions.

Solution 1

.parent{
  height:100px;
  display: table-cell;
  vertical-align: middle;
  background-color: red
}

.text{
  background-color:green;
}

<div class="parent">
  <span class="text">Some text centered here</span>
</div>

Solution 2

Using defined line-height for .parent and vertical-align for child. In this solution child aligns itself vertically relative to line-height, which is stretched -- it has 100px.

.parent {
  height: 100px;
  background-color: red;
  line-height: 100px;
}

.text {
  vertical-align: middle;
  line-height: normal;
  background-color: green;
}

<div class="parent">
  <span class="text">Some text centered here</span>
</div>

Solution 3

I would recommend using display: flex, because use of display: table-cell outside of tables is not a good practice, at all.align-items: center aligns content vertically, while justify-content: center aligns content horizontally.

.parent{
  height:100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color:red
}

.text{
  background-color:green;
}

<div class="parent">
  <span class="text">Some text centered here</span>
</div>

Answer 2

Vertical align doesn't work on divs, a common workaround is to use display: table-cell in the container:

.parent{
  height:100px;
  background-color:red;
  display: table-cell;
  vertical-align:middle;
  .text{
    background-color:green;
  }
}

Or, using CSS3 Flexbox, you can use this:

.parent{
  height:100px;
  background-color:red;
  display : flex;
  align-items : center;
  .text{
    background-color:green;
  }
}

Answer 3

If we check the documentation we will read this:

The vertical-align property can be used in two contexts:

To vertically align an inline element's box inside its containing line box. For example, it could be used to vertically position an <img> in a line of text:

But what is a line box?

You can refer to this part of the specification to get better idea about line boxes. It may be complex at the start but to make it easy the height of the line box is defined by the inline element.

In your case, you have only one inline element that define the line box and its height is equal to the height of the line box thus there is nothing to align as all the alignment will be equivalent.

.box {
  height:100px;
  border:1px solid red;
}
span {
 background:pink;
 /*All these values will define the line box*/
 line-height:25px;
 font-size:20px;
}

<div class="box">
<span>text</span>
</div>
<div class="box">
<span style="vertical-align:middle;">text</span>
</div>
<div class="box">
<span style="vertical-align:top;">text</span>
</div>
<div class="box">
<span style="vertical-align:bottom;">text</span>
</div>
<div class="box">
<span style="vertical-align:text-top;">text</span>
</div>
<div class="box">
<span style="vertical-align:text-bottom;">text</span>
</div>

Now, suppose you have two inlines elements with different properties (font-size, line-height, font-family, etc). In this case, the line box will be calulcated considering both elements like described in the specification and vertical-align will have an effect in this case because:

When the height of a box B is less than the height of the line box containing it, the vertical alignment of B within the line box is determined by the 'vertical-align' property.

.box {
  height:100px;
  border:1px solid red;
}
span {
 background:pink;
}
span:last-child {
  font-size:2em;
}

<div class="box">
<span>text</span><span>big text</span>
</div>
<div class="box">
<span style="vertical-align:middle;">text</span><span >big text</span>
</div>
<div class="box">
<span style="vertical-align:top;">text</span><span>big text</span>
</div>
<div class="box">
<span style="vertical-align:bottom;">text</span><span >big text</span>
</div>
<div class="box">
<span style="vertical-align:text-top;">text</span><span >big text</span>
</div>
<div class="box">
<span style="vertical-align:text-bottom;">text</span><span >big text</span>
</div>

As you can see the line box is defined by the bigger text and now you can align the small text with within it.

This is a very simplified explanation using simple wording, refer to the specification for a more accurate and complete explanation.

Answer 4

As it states here you cannot use vertical-align in block-level elements. Your code isn't working because div is such a block-level element. In order for your code to work you must use some other kind of element.

Damian Peralta has done this by using table-cell on your parent. The other problem is that you applied vertical-align to the child, which is by default just as high and wide as it needs to be. So effectively your code is working, it centers the contents of your span (the text), you just dont't see it because the span is exactly as high as the text itself.

So you have two options:

1) Use some non block-element as parent and apply vertical-align to the parent

.parent{
  height:100px;
  background-color:red;
  vertical-align:middle;
  display: table-cell;
}
.text{
  background-color:green;
}

2) Or make the text element higher:

.parent{
  height:100px;
  background-color:red;
}
.text{
  background-color:green;
  // You need to use line-height here because the height of inline elements cannot be changed
  line-height: 100px;
  vertical-align:middle;
}

Answer 5

Try this

.parent{
  height:100px;
  background-color:red;
  width:100%;
  display:table;
}
.text{
  vertical-align:middle;
  background-color:green;
  display:table-cell;
}

<div class="parent">
  <span class="text">Some text centered here</span>
</div>

Answer 6

There are many ways to align element on center vertically and/or horizontally. I find this guidelines very useful.

My favourite is to use flexbox technique since most of the time I don't want to fix the height and width.