111

これは私の最初のTwitterBootstrapエクスペリエンスです。いくつかの見出し（h1、h2など）を追加しましたが、それらは左側に配置されています。見出しを中央に配置する正しい方法は何ですか？

4

6 に答える 6

157 
.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

bootstrapは、テキスト整列用に3つのcssクラスを追加しました。

于 2013-03-01T06:02:02.093 に答える
90

中央の見出しの要素で使用するだけclass='text-center'です。<h>

<h2 class="text-center">sample center heading</h2>

左見出しの要素で使用しclass='text-left'、右見出しの要素で使用します。<h>class='text-right'<h>

于 2016-05-22T20:44:33.483 に答える
36

行のクラス属性で「justify-content-center」を使用するだけです。

<div class="container">
  <div class="row justify-content-center">
    <h1>This is a header</h1>
  </div>
</div>
于 2018-10-28T18:47:37.010 に答える
12

コメントによると、すべての見出しを中央に配置するには、次のように、すべての見出しtext-align:centerに同時に追加するだけです。

CSS

    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }
于 2012-06-22T14:45:46.240 に答える
5

Bootstrapには多くのビルド前のクラスが付属しており、そのうちの1つはですclass="text-left"。必要に応じてこのクラスに電話してください。:-)

于 2016-10-13T13:01:53.503 に答える
1

ブートストラップ5.2.0の現在のバージョンでは、text-center、（center）text-end、（right）text-start、（left）です。

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
于 2021-09-01T12:54:05.693 に答える