Geek Answers Handbook

Vertically central elements in CSS

I have two elements side by side. Element 2 is smaller than element 1. Both elements do not have a fixed height. I need to vertically center element 2. How to achieve this with CSS?

Edited by:

This is what I have so far:

<div id="container" style="width: 100%;">
    <div id="img1" style="float: left;">
        <img src="image1.jpg".../>
    </div>
    <div id="img2" style="float: right;">
        <img src="image2.jpg".../>
    </div>
</div>
Height

img1 will always be greater than the height of img2. I want img2 to be vertically aligned. Hope this clarifies what I'm trying to accomplish.

+5
source share
5 answers

- display: table -. , IIRC ( , ) display: table ... IE, ? , , display: table, .

<div id="container" style="display: table;">
    <div id="div1" style="display: table-cell; vertical-align: middle;">
        <img id="img1" src="image1.jpg" />
    </div>
    <div id="div2" style="display: table-cell; vertical-align: middle;">
        <img id="img2" src="image2.jpg" />
    </div>
</div>

(, , .)

display table, table-row table-cell , HTML table, tr td, ( , table-cell table s), .

+5

. display: table-cell parent display: table ( , valign = "center" ) : 45% ( , ).

, . ? / Y- 1 2? ? ? , ?

, IE, Javascript / ( script - ), ( , , ), .. CSS ( ), , .

+3

, Safari (, webapp iPhone), CSS3 . : http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center

+2

, . Kevin, , , IE ( ). , div.

0

, .

-1

More articles:


All Articles