垂直对齐p标签中的span标签[重复]

【问题标题】：Vertically aligning a span tag in a p tag [duplicate]垂直对齐p标签中的span标签[重复]
【发布时间】：2016-01-20 07:48:22
【问题描述】：

我有这个 html 结构：

<div style="text-align: center; margin-top: 100px;width:100%;vertical-align:center">
  <p>
    <span id="spn">Some dummy text</span>
    <span><img class="size-full wp-image-647 aligncenter" src="http://image.png" alt="website_repairman" width="300" height="325" /></span>
  </p>
</div>

我想将图像居中放置在页面中间，文本位于图像的右侧或左侧，但它应该在中间垂直对齐。

【问题讨论】：

标签： css html

【解决方案1】：

请尝试关注

.main-div{
  display: table;
}
#spn{
  display: table-cell;
  vertical-align: middle;
}

 <div style="text-align: center; margin-top: 100px;width:100%;vertical-align:center">
  <p class="main-div">
    <span id="spn">Some dummy text</span>
    <span><img class="size-full wp-image-647 aligncenter" src="http://dummyimage.com/300x350/red/fff" alt="website_repairman" width="300" height="325" /></span>
  </p>
</div>

【讨论】：