我有类似下面的情况:
<div id="container">
<div id="prev">
prev
</div>
<div id="content">
some content
</div>
<div id="next">
next
</div>
</div>
我希望结果看起来像这样:
请注意,prev 和 next 相对于 Content 垂直居中,并且所有内容都在页面上水平居中。
很抱歉,如果之前已经介绍过,但似乎有很多不同的方法可以做类似的事情,我不确定哪种方法适用于这种情况。 CSS3/HTML5 并不是真正的问题,只要它在 Chrome、Safari、Firefox 和 IE(可能不是关键)中工作。
编辑:另外,我不确定这个问题是否真的很清楚,但我不知道内容的大小。它可以是任何东西。
编辑 2:此外,内容通常是图像。
最佳答案
有几种方法可以做到这一点,我的选择是在容器上使用 display: table-cell 和 vertical-align: middle。问题是您不能将绝对位置放在容器上:
#container {
border: solid #000 1px;
display: table-cell;
vertical-align: middle;
height: 400px;
width: 400px;
text-align: center;
}
#container div {
display: inline-block;
}
#content {
border: solid #000 1px;
padding: 10px;
width: 200px;
}
适用于 IE8+ 和现代浏览器。
关于html - 相对于 css 中的另一个元素垂直居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7681427/