html - 为什么我的图片不在 div 的中心

Question

为什么我的图片不在 div 的中心(水平、垂直)。

<div>
   <img id = "loader-img" class="centered" alt src="al.gif">
</div>

我的 CSS 是:

.centered {
    display: block;
    margin-left: 150px;
    margin-right: 150px;
    margin-bottom: 100px;
    margin-top: 100px;
    height: 200px;
    width: 200px;
   }

这是我的图像在 div 中的样子:

Answer 1

试试这个:

.frame {
    height: 125px;      
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;
    text-align: center; margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class=frame>
    <span class="helper"></span>
    <img src="http://www.afew-store.com/js/vigoshop/ajaxcart/ajax-loader.gif" height=250 />
</div>

演示 Here

更新:正如您所说，上面是您正在使用的图像，请注意给定的图像本身并不好。由于它具有白色背景，因此很难注意到差异。

我在图像周围绘制边框并再次张贴在这里: