Of all the CSS attributes that are available to web developes, the vertical-align
attribute is perhaps the most mystifying. At first glance, the attribute seems like the vertical aligning cousin of the text-align
attribute, but when you try and use it to vertically-centre your elements, it doesn’t work!
<div style="height:100px;background-color:#eee;"> <p style="background:#dcc;">Item to be vertically-centred</p> </div>
Item to be vertically-centred