是否有可能在一个div内垂直alignment文本？
下面的代码（也可以在JS小提琴演示 ）可以不把文本放在中间，因为我理想的情况是这样。 我找不到任何方法垂直居中文本在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; }
为您的文本内容创build一个容器，也许是一个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>
Andres Ilich说得对。 以防万一有人错过了他的评论…
A.）如果你只有一行文字：
HTML：
<div>vertically centered text</div>
CSS：
div { height: 200px; line-height: 200px; /* <-- this is what you must define */ vertical-align: middle; }
点击演示
B.）如果你有多行文字：
HTML：
<div><span>vertically centered text</span></div>
CSS：
div { height: 200px; line-height: 200px; } span { display: inline-block; vertical-align: middle; line-height: 14px; /* <-- adjust this */ }
点击演示
2016年4月10日更新
现在应该使用Flexbox垂直（或甚至水平）alignment项目。
<div class="flex-container"> <div class="flex-item">Item</div> <div class="flex-item">Item</div> <div class="flex-item">Item</div> <div class="flex-item">Item</div> </div> <style> .flex-container { display:flex; align-items: center; /* Vertical center alignment */ justify-content: center; /* Horizontal center alignment */ } </style>
一个好的flexbox指南可以阅读CSS技巧 。 感谢Ben（来自评论）指出，没有时间更新。
一个叫Mahendra的好人在这里发布了一个非常有效的解决scheme
下面的类应该使元素水平和垂直居中其父。
.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; }
这是一个古老的线程，但接受的答案不适用于多行文本，这是谷歌的顶部结果。 我更新了jsfiddle 来显示css多行文本垂直alignment ，如此处所述
<div id="column-content"> <div>yet another text content that should be centered vertically</div> </div> #column-content { border: 1px solid red; height: 200px; width: 100px; } div { display: table-cell; vertical-align:middle; text-align: center; }
它也与“另一个…”
尝试这个：
HTML
<div><span>Text</span></div>
CSS
div { height: 100px; } span { height: 100px; display: table-cell; vertical-align: middle; }
这只是应该工作：
#column-content { -------- margin-top:auto; margin-bottom:auto; }
尝试在您的演示。
添加一个垂直alignment的CSS #column-content strong太：
#column-content strong { ... vertical-align: middle; }
另请参阅更新的示例 。
===更新===
与其他文字和另一个垂直alignment的跨度：
HTML：
... <span>yet another text content that should be centered vertically</span> ...
CSS：
#column-content span { vertical-align: middle; }
另请参阅下一个示例 。
如果你需要多行，这是最简单的方法。 用另一个span包裹你的文本，用line-height指定它line-height 。 多行的技巧是重置内部span的line-height 。
<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>
.textvalignmiddle { line-height: /*set height*/; } .textvalignmiddle > span { display: inline-block; vertical-align: middle; line-height: 1em; /*set line height back to normal*/ }
DEMO
当然，外部span可能是一个div或者什么haveyou
为了使Omar（或Mahendra）的解决scheme更加通用，相对于FireFox的代码块应该被下面的代码所取代：
/* Firefox */ display:flex; justify-content:center; align-items:center;
奥马尔的代码的问题，否则会出现，当你想要在屏幕中或在它的直属祖先框。 这个对中是通过设置其位置来完成的
position: relative; 或position:static; （不与位置：绝对也不固定）。
然后margin：auto; 或保证金右：自动; 保证金左：自动;
在这个箱子中心alignment的环境下，奥马尔的build议不起作用。 在IE8中也不行（还有7.7％的市场份额）。 所以对于IE8（和其他浏览器），应该考虑上面解决scheme中的一个解决方法。
我知道这是完全愚蠢的，你通常真的不应该在不创build表格时使用表格，但是：表格单元格可以将多行文本垂直居中alignment，甚至可以默认这样做。 所以一个工作得很好的解决scheme可能是这样的：
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
