使用flexbox垂直对齐td元素中的元素[重复]

Posted 2023-03-05

【中文标题】使用flexbox垂直对齐td元素中的元素[重复]

【英文标题】：vertically align element in td element using flexbox [duplicate]

【发布时间】：2018-03-30 21:30:13

【问题描述】：

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

这是我迄今为止尝试过的：https://jsfiddle.net/3tr0cn4s/1/

【参考方案1】：

这个不需要flex：既然是表格单元格，添加就够了

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

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

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

【参考方案2】：

查看以下代码：

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

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

【讨论】：

通常不喜欢在我的 css 中的任何地方指定!important。不过谢谢

我同意，我只是想指出您需要删除哪些属性。