vertical-align with inline elements

Question

HTML

<html>
    <head>
        <style type="text/css">
            div {
                height: 300px;
                width: 300px;
                background-color: aqua;     
                margin-bottom: 10px;
            }           
            div > span {                
                vertical-align: middle;
                background-color: orange;               
                font-size: 3em;
            }    
        </style>
    </head>
    <body>          
        <div>           
            <span>Hello!</span>
        </div>          
    </body>
</html>

In the image below, Actual is what the HTML above renders, and Expected is the layout I need.

Is the CSS property vertical-align supposed to work this way?

Edit :

This question is not a duplicate, I'm trying to understand the behavior of vertical-align: middle with inline elements. In the case above, keeping or removing the above property value has no effect on the HTML layout.

Edit2 : The demo under the heading "A more versatile approach" presented in the top answer of the duplicate question suggested in the comments presents a different layout in my browser. I'm running Google Chrome Version 47.0.2526.106 (64-bit).

Here's a snaphsot of how it looks in my browser (different from what it looks on the demo link):

In the image below, the span element is glued to the top.

See [Vertical align not working on inline-block](http://stackoverflow.com/q/35529582/1529630) to know **why** `vertical-align: middle` doesn't center at the middle of the containing block, and [How to align text vertically center in div with CSS?](http://stackoverflow.com/q/8865458/1529630) to know **how** you can do it instead. — Oriol, Feb 22 '16 at 23:03
About your 2nd edit, I can't reproduce that neither on Firefox 47 nor Chromium 50. If you really can reproduce that, and want to know if it was a bug, if it has been fixed, etc. better ask a new question. — Oriol, Feb 22 '16 at 23:11

score 8 · Accepted Answer · edited May 23 '17 at 12:18

vertical-align aligns the inline elements with each other, it doesn't position them within their container.

So if for example you have a taller vertical-align: middle inline element in the same div, the "Hello" will be centred relative to it:

div {
  height: 300px;
  width: 300px;
  background-color: aqua;
  margin-bottom: 10px;
}
div > span {
  vertical-align: middle;
  background-color: orange;
  font-size: 3em;
}
.big {
  font-size:200px;
}

<div>
  <span>Hello!</span>
  <span class="big">B</span>
</div>

There are several techniques for centring text vertically in a container but this is not one - see How do I vertically center text with CSS?

score 0 · Answer 2 · answered Feb 22 '16 at 22:44

0

https://jsfiddle.net/x0gc91ch/1/

add line-height: 300px

to the div css, because you are trying to align to the middle of the default line-height, which isn't as tall as your parent div.

answered Feb 22 '16 at 22:44

Sanova

541
3
10

vertical-align with inline elements

2 Answers2