Aligning Text Vertically part 3

The vertical-align Property

Vertical align property does not act the same way for all elements.
For example, some additional CSS styling is needed for div elements. 

The HTML:<div class="main">
<div class="paragraph">
This text is aligned to the middle
</div>
</div>
The CSS:

.main {
height: 150px; width: 400px;
background-color: LightSkyBlue;
display: inline-table;
}
.paragraph {
display: table-cell;
vertical-align: middle;
}Try It Yourself

Result:
display: inline-table; and display: table-cell; styling rules are applied to make the vertical-align property work with divs.