Html 垂直居中对齐文本与图标（更新）

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

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

以下是该网站的链接：

以下是未对齐图标的屏幕截图：

以下是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> 

清除所有工作、用品和垃圾

我刚登录了你的网站

将该类添加到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> 

清除所有工作、用品和垃圾

---

尝试用这些样式更新您的类。我想这会为你确定款式

.bullet-one {
    display: table;
    margin: 0 auto;
}

.img-left {
    width: 60px;
    margin: 0;
    display: table-cell;
    text-align: right;
}

.content-right {
    display: table-cell;
    vertical-align: middle;
}

.content-right p {
    margin: 0;
}

我已经附上了更新的风格截图

---

试着给你的图片

垂直对齐：中间

天啊，我甚至不知道垂直对齐中间的存在。谢谢@单靠marcos vertical align无法解决这一问题。检查我的答案我在浏览器中测试了它，它工作了！只需将我的css粘贴到您的css文件中，然后用我的答案中的html替换html。因此我刚刚意识到“”标记正在创建一个水平线空间，因为当我将位置设置为绝对时，p标记内的文本与图像对齐@loktarDo没有将其设置为绝对值。这会给你带来更多的问题，即使看起来它现在已经解决了一些问题。嗨@wuno，为什么“显示：表格单元格”会起作用？display:table cell的作用是什么？@marcos它使您案例中的p标记的行为类似于td。td是将数据放入表行tr的位置。在表中包装p标记的事实使它显得愚蠢。表单元格使元素的行为类似于元素。如果你还需要什么，请告诉我。如果我的回答对你有帮助，请接受它！：）添加填充只适合单行的UI。如果该行穿过多行，它将为所有多行添加填充。