Question

如何将元素/文本垂直居中于表格数据td元素，该元素填充其父表格行tr的整个高度？我认为flexbox是最好的方法。

以下是我到目前为止所尝试的内容：https://jsfiddle.net/3tr0cn4s/1/

Answer 1

你不需要弯曲：因为它是一个表格单元格，它足以添加

.table > tbody > tr > td.cell {
  vertical-align: middle;
}

https://jsfiddle.net/1jp53m1q/1/

（长选择器是覆盖顶部对齐单元格内容的现有规则所必需的）

Answer 2

查看以下代码：

＆＃13;

td.cell {
    padding: 0 !important;
    line-height: 100% !important;
    vertical-align: middle !important;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table">
  <thead>
    <tr>
      <th>Molecule</th>
      <th>Rank</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="cell"><span>CO<sub>2</sub></span></td>
      <td>
        <select class="form-control">
          <option>23</option>
          <option>24</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="cell"><span>SO<sub>4</sub></span></td>
      <td>
        <select class="form-control">
          <option>23</option>
          <option>24</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

使用flexbox在td元素中垂直对齐元素

2 个答案: