Question

由于垂直对齐的奇怪行为，我发现无法将元素集中在单个<td>中的所有3 <tr>内。

我的整个桌子都是一个日期选择器，我需要它有两个侧面按钮（箭头），中间的文字全部垂直居中。我认为每个包含vertical-align: middle的{{1}}都可以做到这一点，但箭头在某种程度上拖累了Firefox：

Firefox datepicker

它们在Chrome上定位良好：

Chrome datepicker

我尝试用笔重建Firefox问题，但最初无法解决。只有经过一些小小的尝试后，当中心元素足够小时，才发现<th>的奇怪行为。

所以this pen在Firefox上都呈现错误。请注意，这次我使用vertical-align代替vertical-align: top，因为它更好地说明了问题。黑匣子应该到达蓝色盒子的唯一顶部，但由于某些原因，它不会增加它的高度。

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

Firefox pen

和Chrome一样，它位于中间而不是顶部：

Chrome pen

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

Answer 1

您在错误的位置添加了vertical-align: top;。将其添加到<button>，并注意边距。希望这会有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

button {
  display: block;
}

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

.text {
  line-height: 1;
}

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

在这里演示http://codepen.io/anon/pen/NPzaLg

当细胞内容非常小时，表格细胞上的垂直对齐的奇怪行为

2 个答案: