[解決済み] 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;        
}

解決方法は？

テキストコンテンツ用のコンテナである 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