在 div 中垂直对齐文本

下面的代码（也可以在 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;        
}

css vertical-alignment

答案

安德烈斯 · 伊里奇（Andres Ilich）正确。万一有人错过他的评论...

A.）如果只有一行文本：

div
{
  height: 200px;
  line-height: 200px; /* <-- this is what you must define */
}

<div>vertically centered text</div>

B.）如果您有多行文字：

div
{
  height: 200px;
  line-height: 200px;
}

span
{
  display: inline-block;
  vertical-align: middle;
  line-height: 18px; /* <-- adjust this */
}

<div><span>vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text vertically centered text</span></div>

为您的文本内容创建一个容器，也许是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

更新 2016 年 4 月 10 日

现在应该使用 Flexbox 垂直（甚至水平）对齐项目。

body {
    height: 150px;
    border: 5px solid cyan; 
    font-size: 50px;
    
    display: flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
}

Middle

可以在 CSS Tricks上阅读有关 flexbox 的良好指南。感谢本（指出）。我没有时间更新。

一个名叫 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;
}