Question

更新

基于jme11回答，d-flex阻止了对齐，但是没有d-flex，列完全混乱（使用bootstrap 4）要重新定义:(第一行应该对齐中间，但不是）

http://jsbin.com/fafoweleka/1/edit?html,css,output

上下文

我想在bootstrap 4表中对齐我的文本。我正在尝试使用vertical-align:middle，但文字仍然与顶部对齐。

问题

我错过了什么？

标记：

<table class="table">
  <tr class="d-flex">
    <td class="col-1">1</td>
    <td class="col-4" style="vertical-align:middle">Miami</td>
    <td class="col-3">4.0</td>
    <td class="col-3"></td>
  </tr>
</table>

结果：

Answer 1

修改

如果要在tr元素上使用d-flex类以允许在单元格上使用col类，可以通过添加d-flex和align-items-center来垂直对齐特定单元格中的文本等级到那个单元格。

＆＃13;

.strecher {
   height: 200px;
 }
 
 .my-table td {
  display: flex;
  align-items: center;
 }

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <h3>For a specific cell:</h3>
  <table class="table" style="background-color: #eee;">
    <tr class="d-flex">
      <td class="col-1">1</td>
      <td class="col-4 d-flex align-items-center">Miami</td>
      <td class="col-3">4.0</td>
      <td class="col-3"><div class=strecher></div></td>
    </tr>
  </table>
  <h3>For all cells:</h3>
  <table class="table my-table" style="background-color: #eee;">
    <tr class="d-flex">
      <td class="col-1">1</td>
      <td class="col-4">Miami</td>
      <td class="col-3">4.0</td>
      <td class="col-3"><div class=strecher></div></td>
    </tr>
  </table>
</body>
</html>

＆＃13;

无法在引导表

1 个答案:

修改