If you are new to working with CSS, you may find that the language comes with its fair share of quirks that can be frustrating, such as the
text-align attribute not always working at horizontally-aligning your content. In a similar way to
vertical-align attribute doesn’t always work at aligning your content vertically. Take the following HTML code for example:
<div style="width:100%;height:140px;background:#ddd;text-align:center;vertical-align:middle;"> <img src="http://placekitten.com/75/75"/> </div>
Even with the
vertical-align:middle style assigned to it, the image doesn’t align itself vertically! What’s going on? Here’s a quick breakdown of how to do it, with lots of examples, without having to do too much reading (great for if you’re rushing out a school assignment).