为什么我的形象不在div的中心

时间:2015-03-31 09:39:46

标签: html css

为什么我的图片不在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中的样子:

enter image description here

4 个答案:

答案 0 :(得分:1)

试试这个:

&#13;
&#13;
.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;
}
&#13;
<div class=frame>
    <span class="helper"></span>
    <img src="http://www.afew-store.com/js/vigoshop/ajaxcart/ajax-loader.gif" height=250 />
</div>
&#13;
&#13;
&#13;

演示Here

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

我在图像周围绘制边框并再次在此处发布:

enter image description here

答案 1 :(得分:0)

试试这个:

HTML

<div>
   <img src="al.gif">
</div>

CSS

div {
  display: -webkit-flex;
  display: flex;
}

img {
  margin: auto;
}

此外,您的id属性包含空格符号。你应该删除它们:

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

答案 2 :(得分:0)

这对我有用:

CSS:

#logo{
  max-width: 100%;
  height: auto;
  width: auto;

HTML:

<div>
   <img id="logo" src= {{image.get('logo').url()}}>
</div>

答案 3 :(得分:0)

根据要求,这是我的解决方案:

HTML

<div>
    <img src='http://placehold.it/100x50' />
</div>

的CSS:

div {
    display: flex;
    background: pink;
    height: 200px;
}

img {
    margin:auto;
}

jsfiddle.net/lharby/48o5zd7g(感谢Zakhar Day)。

这个帖子中有3个答案都可以。

您的css中可能还有其他内容覆盖了您尝试应用的css规则?我会删除.centered类属性,并从一些非常简单的东西开始。