将图像居中在div中
[英]Centering an image within a div
问题描述
I have already set the border of an image within a div to be none. 
我已经将div图像的边框设置为none。 I now want to center that image within its containing div. 我现在想要将该图像置于其包含的div中。 I have tried using the margin: 0 auto; 我试过使用margin: 0 auto; but that did not work. 但那没用。
I am sure I am overlooking something stupid but I would like to enlist the help of the stackoverflow community so this doesn't take me an hour of staring at the screen to figure out. 我确信我忽略了一些愚蠢的东西，但我想寻求stackoverflow社区的帮助，所以这不需要我花一小时盯着屏幕搞清楚。 Thanks a lot. 非常感谢。
<body>
<div id="wrapper">
<div id="banner">
<img src="logo3.png"/>
<!--<img src="kslf_logo.png"/>
<img src="logo2.png" title="Katie Samson Lacrosse Festival Logo"/>-->
<div id="social_network">
<a href="#" target="_blank" title="Check out the Facebook Page!">Facebook</a>
</div>
</div>
</div>
</body>
Here is the CSS... 这是CSS ......
#banner {
height: 100px;
width: 960px;
padding-bottom: 10px;
}
#banner img {
border: none;
margin: 0 auto;
}
6 个解决方案
解决方案1
25 已采纳 2010-01-25 17:55:15
Try setting the image's display property to block : 尝试将图像的display属性设置为block ：
banner {
height: 100px;
width: 960px;
padding-bottom: 10px;
}
banner img {
border: none;
display: block;
margin: 0 auto;
}
解决方案2
2 2010-01-25 17:54:44
Applying text-align: center to your banner div will center its inline and inline-block children (which encompasses the img tag). 将text-align: center应用于您的横幅div将使其内联和内联块子项（包含img标记）居中。
The reason why your code wasn't working is because margin: 0 auto will only center block elements. 你的代码无法工作的原因是因为margin: 0 auto只会使块元素居中。
解决方案3
0 2010-01-25 17:53:06
horizontal: just try 水平：试试吧
text-align:center;
:) :)
解决方案4
0 2010-01-25 17:53:50
Either 或
banner {
height:100px;
text-align:center;
width:960px;
padding-bottom:10px;}
or if the img is of specific size then 或者如果img具有特定的大小
banner img {
display:block;
width: <somevalue>px;
border:none;
margin:0 auto;
}
will work .. 将工作 ..
解决方案5
0 2010-01-25 17:53:57
I believe it is just margin: auto; 我相信这只是margin: auto; . 。 No zero needed. 不需要零。
解决方案6
0 2016-03-30 14:27:46
After many exhaustive tries to center align an image in a div (vertically and/or horizontally), I understood the following. 经过多次彻底尝试将图像居中对齐div（垂直和/或水平）后，我理解了以下内容。
To vertically center align an image in a div. 垂直居中对齐div中的图像。
.div {
display:flex;
justify-content:center
}
To horizontally center align an image in a div. 水平居中对齐div中的图像。
.div {
display:flex;
align-items:center;
}
To center both vertically and horizontally an image in a div, there are 2 options (1) 要在div中垂直和水平居中显示图像，有2个选项（1）
div {
display:flex;
align-items:center;
justify-content:center;
}
(2) （2）
.div {
display:flex
}
.div > img {
margin: auto
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.