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

Question

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

刚刚发现p标签上面的space是图片生成的。当我将图像的定位设置为绝对时，文本和图像对齐。

这里是 link 网站：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

我刚刚查看了您的网站，

将此 class 添加到您的 css 然后将 class 添加到您想要垂直褐藻糖胶中心 table 内的 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>

Answer 2

尝试使用这些样式更新您的类。我认为这会为您修复样式。

.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;
}

我附上了更新后的样式截图。

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

Vertical center align text with icon (update)

html

css

zurb-foundation