html - 垂直居中对齐文本与图标(更新)

Question

我在将两个图标与文本元素垂直对齐时遇到问题。我不确定为什么文本 div 在其容器上方创建了一个额外的空间。如何将两个文本行与两个复选框图标垂直对齐？

• 我刚刚意识到 p 标签上方的空间是由图像生成的。当我将图像的定位设置为绝对时，文本和图像对齐。

这是网站的链接:http://fosterinnovationculture.com/email/index.html

这是未对齐图标的屏幕截图:

这是 HTML:

<th style="text-align:center">
     <div class="bullet-container">
          <div class="bullet-one">
               <div class="img-left" style="width:60px; margin:0; display:inline-block; text-align:right;">
                    <img src="images/icons/check_box.png" style="width:30px; display:inline-block; margin-right:0px">
               </div>
               <div class="content-right" style="display:inline-block">
                    <p>Remove all work, supplies, and trash</p>
               </div>
          </div>
    </div>
</th> 

Answer 1

我刚刚查看了您的网站，

将此类添加到您的 css，然后将该类添加到要垂直对齐的表格内的 p 标记

.text-align-vert {
    display: table-cell;
    padding: 4px;
}

然后在你的html里面

<th style="text-align:center">
     <div class="bullet-container">
          <div class="bullet-one">
               <div class="img-left" style="width:60px; margin:0; display:inline-block; text-align:right;">
                    <img src="images/icons/check_box.png" style="width:30px; display:inline-block; margin-right:0px">
               </div>
               <div class="content-right" style="display:inline-block">
                    <p class="text-align-vert">Remove all work, supplies, and trash</p>
               </div>
          </div>
    </div>
</th>