Home/ Questions/Q 521243
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T08:13:48+00:00

How to vertically center a child element of arbitrary size inside a floated parent

  • 0

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.)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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!

    • 0