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



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 to add css in post? [closed]

    How to hide div for specific height or width using CSS [duplicate]

    How To Move A DIV Element A Little Towards The Top

    How to determine largest possible font-size such that it fits on one line in CSS [closed]

    How to create push button?

    How can I make a different CSS for the first child
    ?

    How can I get this css to display correctly in Chrome?

    How are these sites implementing their onhover overlays?

    How to vertically center more than one line of text (works only on chrome)?

    How to change text-selection styles with javascript [duplicate]

    How do three.js transforms and CSS3 3D-transforms correspond?

    ng-show/ng-hide breaking CSS animations

    How compatible is the new Microsoft edge browser? [closed]

    How to remove extra space in navigation bar? [duplicate]

    How to make Online iPhone “Card Game” with HTML5 [closed]

    How to get dynamic css layout like that:

    How do I simulate a hover with a touch in touch enabled browsers?

    How can I create a postage stamp border?

    How to load CSS on PC and Mobile by jQuery?

    How do I reduce the vertical space between list items in an unordered list?

    c# cassette - how to create different css bundles for different pages

    How does Google Web Fonts decide which version of a font to provide to my browser?

    How can I change the CSS values of multiple elements when my sticky menu becomes fixed?

    how to set css for Zend form?

    jQuery (or JS) - How to get only elements that are certain colour from an array?

    How to change css dynamic by javascript

    jQuery - how do I show the full navbar at certain width?

    How to create DRY CSS when using transform & keyframes

    How to have dynamic image as CSS background?

    How to fluid images when resize window?