How to make a highly uncertain picture vertically aligned relative to the fixed container

Question

如果块是文本，那会很容易。但是块是图像en……

Answer 1

Specify height equals to line-height for the container and vertical-align:middle on the image.

.container {
   height:5em;
   line-height:5em;
   text-align:center;
}
.container img {
   vertical-align:middle;
}

<div class="container">
   <img src="exemple.jpg" alt="exemple" />
</div>

Tableless and cross-browser !

Answer 2

There's not a perfect way to do this without using tables, since the vertical-align CSS property unfortunately does different thing with inline elements and table elements (see http://phrogz.net/css/vertical-align/index.html ).

Several solutions, with specific pro's and con's discussed, can be found here: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Of them, one of the better solutions is the third method presented:

insert a div above the content element. This will be set to height:50%; and margin-bottom:-contentheight;. The content will then clear the float and end up in the middle.

<div id="floater">
<div id="content">
    <img src="my-image.png"/>
</div>
</div>

#floater    {float:left; height:50%; margin-bottom:-120px;}
#content    {clear:both; height:240px; position:relative;}

Answer 3

html code:

<div class="zxx_align_box_5 fix"> <a href="#"> <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></a><a href="#"><img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" /></a></div>

the css:

.zxx_align_box_5 a{display:inline-block; width:1.2em; font-size:128px; text-align:center; vertical-align:middle;} .zxx_align_box_5 a img{vertical-align:middle; padding:2px; border:1px solid #beceeb;}