[Solved] Center img using 'vertical-align: middle' problem

[Rugg]

Hi there,

I’m attempting to center an img within a div using vertical-align: middle, display: table-cell, and text-align: center — the parent div is set to display: table. Below are three test samples highlighting the output — is anyone aware of a solution? Any help is appreciated.

div > img (not working) http://jsfiddle.net/tuMmv/1/

div > h1 (working) http://jsfiddle.net/tuMmv/2/

div > div > img (working) http://jsfiddle.net/tuMmv/0/

Thanks

[__]

vertical-align aligns inline blocks relative to the contents of the block – and an <img> has no “contents.” Giving the element a table-cell container is the best (and proper) solution.

[Paulie_D]

https://css-tricks.com/centering-in-the-unknown/

http://codepen.io/Paulie-D/pen/smjHA

[sadunaresh]

@R

nice technique..

[Author]

Posts