当单元格内容非常小时，vertical-align 在 table 单元格上的奇怪行为

Question

我发现不可能在单个 <tr> 中将所有 3 个 <td> 中的元素居中，因为 vertical-align.

的奇怪行为

我的整个 table 是一个日期选择器，我需要它的 2 个侧边按钮（箭头）和中间的文本全部垂直居中。我认为每个包含 <th> 的 vertical-align: middle 都可以做到这一点，但箭头在某种程度上被拖到 Firefox 上：

它们在 Chrome:

上的位置很好

我试图用笔重构 Firefox 的问题，但最初做不到。只有在一些摆弄之后，我才发现当居中元素足够小时 vertical-align 的奇怪行为。

因此 this pen 在 Firefox 上都呈现错误。请注意，这次我使用 vertical-align: top 而不是 middle，因为它更好地说明了问题。黑框应该到达蓝框的唯一顶部，但由于某些原因，直到你增加它的高度才不会。

这是来自 Firefox 的屏幕（触摸底部而不是顶部！）：

和Chrome，中间比顶部多：

这种行为的原因是什么？在这种情况下如何正确对齐元素？我尝试了绝对定位（给 position: relative 以包含 <th> 和 position: absolute 给它的子元素），但我在 IE 计算相对高度时遇到了问题 - 我提交的问题是 another question.我应该补充一点，所有尺寸都是 variable/dynamic，因此布局不能依赖于任何 fixed-size 计算，但必须完全响应。

Answer 1

您在错误的地方添加了 vertical-align: top;。而是将其添加到 <button> 中，并注意边距。希望这有帮助。

table {
  border-spacing: 0;
  border-collapse: collapse;
  border: 1px solid blue;
}

tr {
  background-color: #ededed;  
}

th {
  padding: 0;
  margin: 0;
}

.text {
  padding: 0 5px;
  font-size: 12px;
}

button {
  border: 0;
  width: 50px;
  height:10px;
  background-color: black;
  margin: 0;
  vertical-align: top;
}

<table>
  <thead>
    <tr>
      <th>
        <button></button>
      </th>
      <th>
        <div class="text">Text</div>
      </th>
      <th>
        <button></button>
      </th>
    </tr>
  </thead>
</table>

Answer 2

我可以给你一个解决方法，但无法正确解释。我认为问题在于不同类型的子元素以不同方式继承 vertical-align 规则，即 inline 和 block。解决方法是使 <button> 成为块，与 <div>.

相同

button {
  display: block;
}

如果您需要进一步的像素完美调整，您还可以添加：

.text {
  line-height: 1;
}

这使得它在 Firefox 和 Chrome 上看起来完全一样。

此处演示http://codepen.io/anon/pen/NPzaLg

当单元格内容非常小时，vertical-align 在 table 单元格上的奇怪行为

Strange behavior of vertical-align on table cell when cell contents are very small

css

vertical-alignment

css-tables