下面的代码(也可以作为JS Fiddle上的演示)没有将文本放置在中间，因为我理想的情况下希望它这样做。我找不到任何方法垂直中心的文本在一个div，甚至使用margin-top属性。我该怎么做呢?
<div id="column-content">
<img src="http://i.stack.imgur.com/12qzO.png">
<strong>1234</strong>
yet another text content that should be centered vertically
</div>
#column-content {
display: inline-block;
border: 1px solid red;
position:relative;
}
#column-content strong {
color: #592102;
font-size: 18px;
}
img {
margin-top:-7px;
vertical-align: middle;
}
2016年4月10日更新
Flexboxes现在应该用来垂直(甚至水平)对齐物品。
身体{
身高:150 px;
边框:5px纯青色;
字体大小:50 px;
显示:flex;
对齐项目:中心;/*垂直中心对齐*/
justify-content:中心;/*水平中心对齐*/
｝
中间
一个很好的flexbox指南可以阅读CSS技巧。谢谢Ben(来自评论)指出这一点。我没有时间更新。
一个叫Mahendra的好人在这里发布了一个非常有效的解决方案。
下面的类应该使元素水平和垂直地以其父元素为中心。
.absolute-center {
/* Internet Explorer 10 */
display: -ms-flexbox;
-ms-flex-pack: center;
-ms-flex-align: center;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari, Opera, and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
display: box;
box-pack: center;
box-align: center;
}
2016年4月10日更新
Flexboxes现在应该用来垂直(甚至水平)对齐物品。
身体{
身高:150 px;
边框:5px纯青色;
字体大小:50 px;
显示:flex;
对齐项目:中心;/*垂直中心对齐*/
justify-content:中心;/*水平中心对齐*/
｝
中间
一个很好的flexbox指南可以阅读CSS技巧。谢谢Ben(来自评论)指出这一点。我没有时间更新。
一个叫Mahendra的好人在这里发布了一个非常有效的解决方案。
下面的类应该使元素水平和垂直地以其父元素为中心。
.absolute-center {
/* Internet Explorer 10 */
display: -ms-flexbox;
-ms-flex-pack: center;
-ms-flex-align: center;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari, Opera, and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
display: box;
box-pack: center;
box-align: center;
}
为了使Omar(或Mahendra)的解决方案更加通用，相对于Firefox的代码块应该被以下内容所取代:
/* Firefox */
display: flex;
justify-content: center;
align-items: center;
当您想要在屏幕中居中或在其直接祖先中设置方框时，Omar的代码就会出现问题。这个定心是通过设置它的位置来完成的
位置:相对;或位置:静态;(不带位置:绝对不固定)。
然后是margin: auto;或者margin-right: auto;margin-left:汽车;
在这种盒心对齐的环境下，Omar的建议是行不通的。它也不能在ie8上运行(市场份额为7.7%)。因此，对于ie8(和其他浏览器)，应该考虑在上述其他解决方案中看到的解决方案。
我知道这完全是愚蠢的，你通常不应该在不创建表的时候使用表，但是:
表格单元格可以垂直居中对齐多行文本，甚至在默认情况下也可以这样做。所以一个很好的解决方案可能是这样的:
HTML:
<div class="box">
<table class="textalignmiddle">
<tr>
<td>lorem ipsum ...</td>
</tr>
</table>
</div>
CSS(使表项总是适合盒子div):
.box {
/* For example */
height: 300px;
}
.textalignmiddle {
width: 100%;
height: 100%;
}
在这里看到的:
http://www.cssdesk.com/LzpeV
