html - 需要在 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

遇到了this post它对我有用:

div{
    position: relative;
}

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

}

(垂直和水平对齐)