web-dev-qa-db-ja.com

列内のテキストを垂直方向に中央揃えにする方法（ブートストラップ4）

列内のテキストを垂直方向に中央揃えにする方法（ブートストラップ4）構造は基本です。以下を参照してください。

<div class="row">
    <div class="col-md-6">
        <span>Text to center</span>
    </div
</div>

みんな！

bootstrap-4twitter-bootstrap-4
11
Angelo Merlo

これを実現するために、親<div class="col-md-6">に my-auto クラスを追加できます。このクラスは、y軸に自動マージンを設定します。詳細については、上記のリンクを参照してください。

次のようになります。

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

<div class="container">
  <div class="row">
    <div class="col-xs-6 my-auto">
      <span>Text to center</span>
    </div>
    <div class="col-xs-6">
      <h1>Hello</h1>
      <h1>Hello</h1>
      <h1>Hello</h1>
    </div>
  </div>
</div>

vertical alignment ユーティリティを使用したくなるかもしれませんが、これらはインライン、インラインブロック、インラインテーブル、およびテーブルセル要素でのみ機能します。

32
Pascal Martineau

auto-margins（my-auto）、またはflexboxユーティリティを使用します。

<div class="container">
    <div class="row">
        <div class="col-md-6 align-self-center">
            <span>Text to center</span>
        </div>
        <div class="col-md-6">
            <p>
            ..
            </p>
        </div>
    </div>
</div>

http://www.codeply.com/go/oy8H1bUOL1

また、 他のいくつかのBootstrapの垂直方向の中央揃えオプション が他の回答で説明されています。

8
Zim