我有一个div 200x200px。我想在div的中间放置一个50 x 50 px的图像。
怎样才能做到呢?
我能够得到它的中心水平使用文本对齐:中心的div。但垂直对齐是问题..
我有一个div 200x200px。我想在div的中间放置一个50 x 50 px的图像。
怎样才能做到呢?
我能够得到它的中心水平使用文本对齐:中心的div。但垂直对齐是问题..
当前回答
我喜欢跳老式马车!
以下是这个答案在2015年的更新。我开始使用CSS3 transform来做我的定位工作。这允许你不需要做任何额外的HTML,你不需要做数学(找到半宽的东西),你可以在任何元素上使用它!
这里有一个例子(最后是小提琴)。HTML:
<div class="bigDiv">
<div class="smallDiv">
</div>
</div>
附带CSS:
.bigDiv {
width:200px;
height:200px;
background-color:#efefef;
position:relative;
}
.smallDiv {
width:50px;
height:50px;
background-color:#cc0000;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
我最近经常做的就是给我想居中的东西一个类然后每次都重用这个类。例如:
<div class="bigDiv">
<div class="smallDiv centerThis">
</div>
</div>
css
.bigDiv {
width:200px;
height:200px;
background-color:#efefef;
position:relative;
}
.smallDiv {
width:50px;
height:50px;
background-color:#cc0000;
}
.centerThis {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
通过这种方式,我将始终能够将容器中的内容居中。你只需要确保你想居中的东西是在一个定义了位置的容器中。
这是小提琴
BTW:这也适用于在较小的divs中居中更大的divs。
其他回答
通常,我将设置行高为200px。通常是这样的。
这有点晚了,但这里有一个解决方案,我用垂直对齐元素在一个父div。
当您知道容器div的大小,但不知道包含的图像的大小时,这是有用的。(这是在使用灯箱或图像旋转木马时经常出现的情况)。
以下是你应该尝试的发型:
container div
{
display:table-cell;
vertical-align:middle;
height:200px;
width:200px;
}
img
{
/*Apply any styling here*/
}
一个简单而优雅的解决方案,每次都适用于我:
<div>
<p style="text-align:center"><img>Image here</img></p>
</div>
easy
img {
transform: translate(50%,50%);
}
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="...">