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中，然后将该类添加到要垂直algin中心的表中的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;
}

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

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

2 个答案: