为什么我的图片不在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中的样子:
答案 0 :(得分: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;
}
&#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;
演示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类属性,并从一些非常简单的东西开始。