Question

我正试图垂直调整内容＆＃34; ABC公司＆＃34;在div中使用Bootstrap 4的对齐助手类;但无法这样做。我使用以下代码。

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

请指出我错过了什么！

Answer 1

为display: flex; justify-content: center; align-items: center; 或设置col-sm text-center，或者为display: flex; justify-content: center;设置col-sm text-center，为align-self: center;设置<span>

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

垂直对齐div中的跨度

1 个答案: