J. Pedro Ribeiro

Vertically Centering Images with HTML & CSS

August 03, 2012

Here is a quick trick whenever you need to vertically centre an image (or paragraph, or any other element) inside its parent container: treat them like tables. That’s right.

By setting the parent element’s display type to table and the child element to table-cell we can vertically align its content. Have a look at the code below:

HTML

  

Centred element

 

CSS

div {display: table; height: 100px}   p {display: table-cell; vertical-align: middle;}

Depending on your site structure, that parent tag could be non-semantic but it’s a price to pay! Also, you got to set a fixed height to this parent element.

There are other solutions using jQuery at page loading but to me it seems too much “power” for such a simple result.

Got any other solution? Let me know!


J. Pedro Ribeiro

Hello!
I’m a Brazilian front-end developer living in London. This website features some of my latest projects and my thoughts on anything web related.
You can find me on Twitter, Instagram, and LinkedIn.
Wanna talk? Send me a message.