Question

How to vertically center a child element of arbitrary size inside a floated parent element (of known size)?

display: table-cell; vertical-align: middle; no longer seems to work when the element is floated.

I created an SSCCE here: http://mathiasbynens.be/demo/center-vertically-inside-float

Without float, everything works as it should. But as soon as the parent element is floated, the vertical alignment fails.

Any ideas how to work around this?

Edit: I should’ve added that the child elements are supposed to be images. In my example page I’m using paragraphs, since I assumed I could apply whatever CSS those p elements needed to img elements with display: block; as well. (Fail.)

Answer 1

Ok, so thanks to porneL’s answer, I found the solution to my problem.

In my SSCCE I used paragraphs as child elements (and porneL gave the correct answer as far as that goes), but what I really needed were images. Turns out this needs a little bit of additional CSS:

div { width: 780px; height: 200px; vertical-align: middle; text-align: center; float: left; }
 div img { vertical-align: middle; }

Thanks for the help, guys!

Answer 2

If it s one-liner, then set line-height of p to height of the container.

Answer 3

Float disables table-cell, because cells can’t be floated. So basically I would recommend the standard stuff – using floated shim technique or absolute positioning.

友情链接