垂直居中对齐文本

我具有竖直对准的两个图标与文本元素的问题。我不确定为什么文本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>

来源

2016-11-20 marcos

试着让你的图片'垂直对齐：middle' – Loktar

上帝，我甚至不知道垂直对齐中存在。谢谢！ – marcos

@marcos vertical-align独自不会处理这个。检查我的答案我在浏览器中测试它，它的工作原理！只需将我的css粘贴到您的css文件中，然后用我的答案中的html代替html。 – wuno

我只是在检查你网站，

这个类添加到你的CSS然后将该类添加到p标签insid Ë要直褐藻中心

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

来源

2016-11-20 05:26:01 wuno

嗨@wuno，何必当初“显示：表单元格的工作？什么显示：表格单元格？ – marcos

@marcos它使你的情况p标签行为像TD。 td是你将数据放入表格行的地方。你在桌子上包装一个p标签的事实让它变得愚蠢。 table-cell \t让元素的行为类似于元素。需要帮助请叫我。如果我的回答帮助你，请接受它！ :) – wuno

添加填充将仅适用于单行的UI。如果这条线穿过多条线，它将为所有多条线添加填充。 – Nitheesh

尝试用这些款式更新课程表里面。我认为这会为你修复风格。

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

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

来源

2016-11-20 06:19:21 Nitheesh

垂直居中对齐文本

回答

相关问题