html - テキストと画像の両方をdivの中央に配置する方法

Question

私はそのようなhtml構造を持っています:

<div class="green">
  <img/>
  <p>
    text
  </p>
</div>

またはそのような構造:

<div class="green">  
  <p class="red">
    <img/>
    text
  </p>
</div>

ここに表示します：

私は次のようにスタイリングしてみました：

.green {
  display: table;
}
p.red {
  display: table-cell;
  vertical-align: middle;
}

しかし、これは結果です：

div {
  display: table;
  height: 140px;
  padding: 6px;
  margin: 18px;
}

p {
  display: table-cell;
  vertical-align: middle;
}

img {
  display: table-cell;
  vertical-align: middle;
  float: right;
  width: 102px;
  height: 120px;
  margin: 0px 0px 0px 10px;
}

<div>
  <p>
    <img src="/images/osteocenter_pozv.png">
    <span><strong>Заболевания позвоночника</strong>&nbsp;- серьезная проблема нашего времени: в последние два-три десятка лет они значительно помолодели и стали встречаться чаще.</span>
  </p>
</div>

テキストと画像の両方を中央揃えにするにはどうすればよいですか?

Answer 1

皆さん、ありがとうございました。しかし、私の解決策は次のとおりです。

1. その他の画像を設定する<p>
2. これ<p>を p の後にテキストで設定します
3. 使用するdisplay: table-cell;

Answer 2

display:inlineテキストとvertical-align:middle画像に使用

参照: http://jsfiddle.net/R6pns/

img {
    vertical-align:middle;
}

p {
    display:inline;
}

<div>
    <p>adfafdfsfffsdfasfdsfdf</p>
    <img src="/images/osteocenter_pozv.png" alt="" />
</div>