css - bootstrap h1 和正常文本对齐

Question

我正在尝试将一些普通文本与 h1 文本对齐。 h1 附近的普通文本显示为上标。我试过垂直对齐但没有用。

这是它的样子:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="row">
  <div class="col col-md-auto">
    <h1>Some big text</h1>
  </div>
  <div class="row">
    <div class="col col-md-auto">Some normal text</div>
    <div class="col col-md-auto">Some normal text</div>
    <div class="col col-md-auto">Some normal text</div>
  </div>
</div>

还有一个 fiddle

Answer 1

使用 Bootstrap class align-items-center 垂直居中对齐文本。添加您不需要 2 行，带列的单行工作正常。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="row align-items-center">
  <div class="col col-md-auto">
    <h1>Some big text</h1>
  </div>
  <div class="col col-md-auto">Some normal text</div>
  <div class="col col-md-auto">Some normal text</div>
  <div class="col col-md-auto">Some normal text</div>
  
</div>