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

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

1. 在其他中设置图像<p>
2. 设置这个 <p>在带有文本的 p 之后
3. 使用display: table-cell;