html - vertical-align with inline elements

HTML

    
        
    
              
        
           
            Hello!
        
          
    

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.

Answer

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;
}

  Hello!
  B

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?