html - 如何在div中同时居中文本和img

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

用于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;