web-dev-qa-db-ja.com

Bootstrap 4つの垂直方向の整列テキストはカードの中央に配置されません

次のカードのテキストの中心を垂直に揃えようとしています：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="row text-center h-100">
  <div class="col-md-3 text-center my-auto">
    <div class="card card-block justify-content-center" style="height: 120px">
      <div class="card-body">
        This is some text within a card body.
      </div>
    </div>
  </div>
</div>

私はここで同様の多くの質問を完全に承知していますが、さまざまな解決策を試しましたが、それらはどれも私のカードでは機能しないようです。

親、カード、カード本体で「my-auto」を試しました。 「d-flex align-items-center h-100」と「justify-content-center」を試しました。また、表示プロパティをいじってみました。私は何が欠けていますか？

csstwitter-bootstrapflexbox
7
tealowpillow

以下はbootstrap 4のflexboxのドキュメントです。続きを読む here を使用したソリューションです。

知っておくべきこと、

d-flex->要素をフレックスボックスにします。

align-items-center-コンテンツを垂直方向に揃えます。

justify-content-center-コンテンツを水平方向に揃えます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="row text-center h-100">
  <div class="col-md-3 text-center my-auto">
    <div class="card card-block d-flex" style="height: 120px">
      <div class="card-body align-items-center d-flex justify-content-center">
        This is some text within a card body.
      </div>
    </div>
  </div>
</div>
27
Naren Murali

私は何が欠けていますか？

行の高さ ：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="row text-center h-100">
  <div class="col-md-3 text-center my-auto">
    <div class="card card-block justify-content-center" style="height: 120px; line-height:120px;">
      <div class="card-body">
        This is some text within a card body.
      </div>
    </div>
  </div>
</div>
3
c-smile