在div中垂直对齐span

Question

我正在尝试使用Bootstrap 4的对齐辅助类来垂直对齐div中的内容"ABC公司"，但无法实现。我正在使用以下代码。

<div class="container" style="width: 740px;">
<div class="row">
  <div class="col-sm text-right" style="line-height: 20px; height: 20px; color:#004990; text-decoration:none; font-family:Helvetica, Arial, sans-serif; font-size:10px;">
      Your Account
  </div>
</div>
<div class="row">
  <div class="col-sm text-center" style="background-color:#0471AF; height:100px;">
    <span class="align-middle">ABC Company</span>
  </div>
</div>

请指出我错过了什么！

- Jestino Sam

---

你究竟想要对齐什么？'ABC 公司' 吗？ - RDumais

@RDumais 是的，我正在尝试在 div 中垂直对齐文本“ABC 公司”。 - Jestino Sam

如果您打算使用图片，最好使用图片。这样会更容易。然后再使用 padding-top、padding-bottom、margin-top 和 margin-bottom 进行调整。 - mickro

看看这个链接。我认为这就是你要找的。Bootstrap最新版本中引入了flex box。 - Jack Moody

可能是一个重复的问题[如何在我的叠加层div中垂直居中我的span？]（https://stackoverflow.com/questions/43863355/how-do-i-center-my-span-vertically-in-my-overlay-div）。这个问题经常被问到，让我怀疑Bootstrap的价值。 - Rob

Answer 1

col-sm text-center 的样式可以设置为 display: flex; justify-content: center; align-items: center;，或者使用 display: flex; justify-content: center; 并给其中的 <span> 元素添加 align-self: center; 样式。

.col-sm.text-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<style>

</style>
<div class="row">
  <div class="col-sm text-right" style="line-height: 20px; height: 20px; color:#004990; text-decoration:none; font-family:Helvetica, Arial, sans-serif; font-size:10px;">
      Your Account
  </div>
</div>
<div class="row">
  <div class="col-sm text-center" style="background-color:#0471AF; height:100px;">
    <span class="align-middle">ABC Company</span>
  </div>
</div>

- curveball