下面的代码(也可以作为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;
}
为了使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(和其他浏览器)，应该考虑在上述其他解决方案中看到的解决方案。
添加一个垂直对齐的CSS内容#column-content strong:
#column-content strong {
...
vertical-align: middle;
}
请参见更新后的示例。
=== update ===
在另一个文本周围加上一个span和另一个垂直对齐:
HTML:
... <span>yet another text content that should be centered vertically</span> ...
CSS:
#column-content span {
vertical-align: middle;
}
请参见下一个示例。
