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

Tags: css,css-float,center,vertical-alignment

Problem :

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:

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

Solution :

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!

    CSS Howto..

    How should I make this code to display inline

    How do I add a button click event to my own button in Visual Studio C#

    How to display a header inline with paragraph text using divs or an alternative method

    How to add padding to the cells of a table with CSS [closed]

    How to rewrite a CSS @import statement

    How to define a document in javascript? WebStorm

    How to make the height REALLY 100%

    How to change SVG color (when using the SVG as background in CSS)

    Jquery/CSS, how to have and access multiple (left) panels, while adjusting main content container automatically

    How can I apply a font type to everything using css

    How to apply CSS to other elements except the hovered one?

    Chrome and Firefox render positioned layout with negative margin differently - how to prevent?

    how to fit text inside a HTML div

    How to change active tab to first css

    How to place differently sized images in 2 columns with figcaption aligned

    How do I create CSS only tabs/pages with #hash URLs?

    How to scale the image with css

    How to display the bottom of an image?

    How can I stop my cursor changing to a vertical arrow over text?

    How to design resolution independent CSS elements?

    How to link after the CSS-Animation?

    How do I get the ID of a JQuery item mid-function?

    how to highlight specific control with css [duplicate]

    How to manage assets for modern/ancient browsers

    CSS- How to create child menu towards leftern side

    how to dynamically move list items inside a DIV to get proper arrangement?

    CSS how to style a parent item when a textarea is in focus?

    How to display “Classic” fractions in CSS / Javascript

    How can I set a height of document [duplicate]

    How to stretch a background-image with css