需要在CSS中居中对齐图像

Question

我试图在html和css的div框中居中对齐(水平和垂直)图像.我无法对齐它.这是我的下面的代码.

<div style="float:left;margin: 10px" >
    <div style="border:1px solid gray;width: 60px;height: 60px;text-align:center;">
        <img style="max-height: 60px;max-width: 60px;" 
        src="http://t1.gstatic.com/images?q=tbn:UnPJn535Xfha7M:http://gizmodo.com/assets/resources/2007/07/ipod_6gen_1.jpg"/>
    </div>
</div>

图像与顶部对齐.我尝试在img标签内使用vertical-align:middle但它没用.

Answer 1

遇到这篇文章,它对我有用:

div{
    position: relative;
}

img {
    position: absolute;
    top: 0; bottom:0; left: 0; right:0;
    margin: auto;

}

(垂直和水平对齐)

Answer 2

<div>&nbsp;<img src="placeholder.gif" width="70" height="120" />&nbsp;</div>
<div>&nbsp;<img src="placeholder.gif" width="90" height="80" />&nbsp;</div>
<div>&nbsp;<img src="placeholder.gif" width="70" height="120" />&nbsp;</div>

div {
    float: left;
    text-align: center;
    width: 150px;
    height: 150px;
    margin: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
    line-height: 148px;
}

div img {
    margin-top: expression(( 150 - this.height ) / 2);
}

html>body div img { /*hidden from IE 5-6 */
    margin-top: 0; /* to clean up, just in case IE later supports valign! */
    vertical-align: middle;
}

Note: some <script> tag, either inline or external (can be a dummy one), is needed to get IE 5.0 on track.

http://snipplr.com/view/24428/center-an-image-inside-a-div-vertical-and-horizo​​ntal-without-knowing-the-images-size/

奇迹般有效.