在div中垂直对齐文本 [英] Vertically align text within a div
本文介绍了在div中垂直对齐文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
下面的代码(也可以作为 JS Fiddle上的演示使用)不会放置文本在中间,这是我理想中想要的.即使使用margin-top
属性,我也无法找到在div
中垂直居中对齐文本的任何方法.我该怎么办?
The code below (also available as a demo on JS Fiddle) does not position the text in the middle, as I ideally would like it to. I cannot find any way to vertically centre text in a div
, even using the margin-top
attribute. How can I do this?
<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;
}
推荐答案
为您的文本内容创建一个容器,也许是span
.
Create a container for your text content, a span
perhaps.
#column-content {
display: inline-block;
}
img {
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: middle;
}
/* for visual purposes */
#column-content {
border: 1px solid red;
position: relative;
}
<div id="column-content">
<img src="http://i.imgur.com/WxW4B.png">
<span><strong>1234</strong>
yet another text content that should be centered vertically</span>
</div>
这篇关于在div中垂直对齐文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文