[英]I can't center the image inside the div
I try to center an image but not sure what I'm doing wrong. 我尝试将图像居中,但不确定我做错了什么。 What should I change/add so the image is center?
我应该更改/添加什么,以便图像居中?
#img-wrap { width:450px; clear:both; display:block } #img-wrap img { margin:0 auto; text-center:center; height:100px; width:100px; background:#000; }
<div id='img-wrap'> <img src='https://www.google.co.in/images/srpr/logo11w.png' /> </div>
Thanks. 谢谢。
The necessary property is named text-align
, not text-center
. 必要的属性名为
text-align
,而不是text-center
。 Also, you don't assign it to the image, but to its parent container. 此外,您不会将其分配给图像,而是分配给其父容器。
#img-wrap { text-align: center; }
Two options, but you seem to mix 'em. 两个选项,但你似乎混合他们。
Either you set text-align: center
to the parent , or you set margin: 0 auto
to the child - and set that element to block
. 您可以将
text-align: center
设置为父级 ,或者将margin: 0 auto
设置为子级 - 并将该元素设置为block
。 This happens because img
has a default display property of inline-block
. 发生这种情况是因为
img
具有inline-block
的默认显示属性。
Parent to text-align - http://jsfiddle.net/BramVanroy/w0jecf01/2/ 父文字对齐 - http://jsfiddle.net/BramVanroy/w0jecf01/2/
#img-wrap {
width:450px;
border: 3px solid black;
text-align: center;
}
#img-wrap img {
height:100px;
width:100px;
background:#000;
}
Child to block - http://jsfiddle.net/BramVanroy/w0jecf01/1/ 孩子要阻止 - http://jsfiddle.net/BramVanroy/w0jecf01/1/
#img-wrap {
width:450px;
border: 3px solid black;
}
#img-wrap img {
margin:0 auto;
height:100px;
width:100px;
display: block;
background:#000;
}
Use following changes in your css 在css中使用以下更改
#img-wrap {
width:450px;
clear:both;
display:block;
text-align:center;
}
#img-wrap img {
height:100px;
width:100px;
background:#000;
}
OR 要么
#img-wrap {
width:450px;
clear:both;
display:block;
text-align:center;
}
#img-wrap img {
margin:0 auto;
height:100px;
width:100px;
background:#000;
display:block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.