我有一个div 200x200px。我想在div的中间放置一个50 x 50 px的图像。
怎样才能做到呢?
我能够得到它的中心水平使用文本对齐:中心的div。但垂直对齐是问题..
我有一个div 200x200px。我想在div的中间放置一个50 x 50 px的图像。
怎样才能做到呢?
我能够得到它的中心水平使用文本对齐:中心的div。但垂直对齐是问题..
当前回答
当然,另一种方法是使用valign创建一个表。不管你是否知道div的高度,这都可以工作。
<div>
<table width="100%" height="100%" align="center" valign="center">
<tr><td>
<img src="foo.jpg" alt="foo" />
</td></tr>
</table>
</div>
但只要可能,您应该始终坚持只使用CSS。
其他回答
垂直对齐是最常被误用的css样式之一。对于不是td或css“display: table-cell”的元素,它不能像你期望的那样工作。
这是一篇关于这个问题的很好的文章。http://phrogz.net/CSS/vertical-align/index.html
实现你想要的目标最常见的方法是:
填充上/下 绝对位置 行高
你可以设置图像的位置是对齐中心水平
#imageId {
display: block;
margin-left: auto;
margin-right:auto;
}
这有点晚了,但这里有一个解决方案,我用垂直对齐元素在一个父div。
当您知道容器div的大小,但不知道包含的图像的大小时,这是有用的。(这是在使用灯箱或图像旋转木马时经常出现的情况)。
以下是你应该尝试的发型:
container div
{
display:table-cell;
vertical-align:middle;
height:200px;
width:200px;
}
img
{
/*Apply any styling here*/
}
通常,我将设置行高为200px。通常是这样的。
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="...">