如何将文本和img中心放在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;
}

但这是结果：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何将文字和图像居中？

Answer 1

使用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>

Answer 2

谢谢大家。 但我的解决方案是：

1. 在其他<p>
中设置图片
2. 在带文字
的p后面设置此<p>
3. 使用display: table-cell;