不能使垂直对齐：中间在引导表中工作答案

【问题标题】：Can not make vertical-align:middle work in a bootstrap table不能使垂直对齐：中间在引导表中工作
【发布时间】：2018-03-07 09:02:55
【问题描述】：

更新

基于 jme11 的回答，d-flex 阻止了对齐，但是没有 d-flex，列完全混乱（使用引导程序 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>

结果：

【问题讨论】：

你能多加一点上下文吗？因为在 jsbin 上，我正在尝试重现您的案例，并且默认情况下它在中间...jsbin.com/tutofowuvu/edit?html,css,output
是的，你是对的，这也是我的问题。我正在使用来自 wrapbootstrap 的 minton 主题，所以上下文真的很大......但没有别的花哨。（引导程序 4）。我也是 html/css 的新手，所以任何想法如何诊断干扰的内容都有帮助。（我正在使用 Chrome 开发工具。）
好吧，看看该去哪里，我不认为这是一个糟糕的问题。我相信很多开发者都会被 d-flex 困住或没有 d-flex...

标签： html css twitter-bootstrap html-table

【解决方案1】：

编辑

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

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

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

【讨论】：

我的示例中的内联样式不应该推翻引导样式吗？
它完全会，除了在你的 jsBin 中，应用了 display flex 的类，并且由于你没有应用 table 类而存在一些其他冲突的样式问题。这是您的 jsBin 的工作版本，具有内联样式：jsbin.com/dugulivona/edit?html,css,output
我使用的是 Bootstrap 4，所以我更改了示例中的链接。你是对的 d-flex 正在阻止对齐，但是没有 d-flex 列完全搞砸了。 jsbin.com/fafoweleka/1/edit?html,css,output
非常感谢。看来这个 d-flex 需要更多的关注（和学习）