Question

我有这个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>

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

Answer 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>

垂直对齐p标签中的span标签

1 个答案: