需要在CSS中居中对齐图像

问题描述

我试图将图像在html和css中的div框中居中对齐（水平和垂直）。我不能中心对齐它。这是我的下面的代码。

I am trying to center align (both horizontally and vertically) the image inside a div box in html and css. I am not able to center align it. Here is my below code.

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

图片与顶部对齐。我试着使用vertical-align：middle在img标签中，但它没有用。

The image is getting aligned to the top. I tried using vertical-align:middle inside the img tag but its of no use.

有人可以帮助我吗？感谢。

Can someone help me? Thanks.

推荐答案

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

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

就像一个魅力。

这篇关于需要在CSS中居中对齐图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！