Question

我正在做一个HTML电子邮件，由于Outlook的支持可怕，我正在建立桌面。我遇到的问题是，我无法将文本垂直居中于th元素中。我的标记非常简单：

<table class="table">
   <tbody>
      <tr>
        <th class="read-more">READ MORE</th>
      </tr>
   </tbody>
</table>

使用以下CSS：

.read-more { 
   background: none repeat scroll 0 0 #1fb4e6;
   border-bottom: 4px solid #1e9fc8;
   color: #ffffff;
   font-weight: lighter;
   height: 39px;
   text-align: center;
   vertical-align: middle;
   width: 120px;
}

但是如提供的图像所示，它不会正确地垂直居中文本。它略微偏移：

PICTURE

我也试图通过line-height来做，但这并没有解决问题。

Answer 1

如果您移除border-bottom，您会在代码段中看到它显然在中间。什么会在你的盒子模型中检查元素显示？也许您没有使用reset样式表。

你的身高是39px，所以一个额外的像素应该上升或下降。

＆＃13;

.read-more { 
   background: none repeat scroll 0 0 #1fb4e6;
   color: #ffffff;
   font-weight: lighter;
   height: 38px;
   text-align: center;
   vertical-align: middle;
   width: 120px;
}

＆＃13;

<table class="table">
   <tbody>
      <tr>
        <th class="read-more">READ MORE</th>
      </tr>
   </tbody>
</table>

＆＃13;

Answer 2

您想要<th>标签的哪些属性？我认为只使用普通的<td>标记（指定width和height）可能会更好，它会自动处理vertical-align（如果您需要{ {1}}）。

vertical-align: middle

<style>
  td {
    text-align: center;
    width: 100%;
    height: 100%;
  }

  table {
    width: 100%;
    height: 100%;
  }
</style>

请参阅here。

通过垂直对齐在表格中的中心文本不准确

2 个答案: