我有一个div 200x200px。我想在div的中间放置一个50 x 50 px的图像。
怎样才能做到呢?
我能够得到它的中心水平使用文本对齐:中心的div。但垂直对齐是问题..
我有一个div 200x200px。我想在div的中间放置一个50 x 50 px的图像。
怎样才能做到呢?
我能够得到它的中心水平使用文本对齐:中心的div。但垂直对齐是问题..
当前回答
https://www.w3.org/Style/Examples/007/center.en.html
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto
}
<IMG class="displayed" src="..." alt="...">
其他回答
.container {
height: 200px;
width: 200px;
float:left;
position:relative;
}
.children-with-img {
position: absolute;
width:50px;
height:50px;
left:50%;
top:50%;
transform:translate(-50%);
}
一个简单而优雅的解决方案,每次都适用于我:
<div>
<p style="text-align:center"><img>Image here</img></p>
</div>
将图像垂直和水平居中的最好方法是使用两个容器,并应用以下属性:
外面的容器
应有显示:表;
内容器
应该有display: table-cell; 应该有垂直对齐:中间; 应该有text-align: center;
一个演示
.outer-container { display: table; width: 80%; /* can be any width */ height: 120px; /* can be any height */ background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .inner-container img { background: #fff; padding : 10px; border : 1px solid #000; } <div class="outer-container"> <div class="inner-container"> <img src="http://s.gravatar.com/avatar/bf4cc94221382810233575862875e687?r=x&s=50" /> </div> </div>
通常,我将设置行高为200px。通常是这样的。
我有这个问题在HTML5中使用CSS3和我的图像在DIV中居中…哦,是的,我不能忘记我必须增加高度来显示图像…有一段时间我不知道它在哪里,直到我做了这个。我不认为位置和显示是必要的。
background-image: url('../Images/01.png');
background-repeat:no-repeat;
background-position:center;
position:relative;
display:block;
height:60px;