下面的代码(也可作为JS Fiddle 上的演示)没有将文本放置在中间,就像我希望的那样。div即使使用该margin- top属性,我也找不到任何将文本垂直居中的方法。我怎样才能做到这一点?
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; }
为您的文本内容创建一个容器,span也许是。
span
#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>
JSFiddle