html - Twitter Bootstrap: センター ピル

Question

私の質問は、どのように錠剤を中央に配置できるかです。

センターブロックを追加して、に変更しようとしましfloat:leftたfloat:centerが、何も役に立ちません。

Answer 1

これでだいぶ簡単になりました！text-centerコンテナでクラスを使用display:inline-blockし、ul. コンテナー内の他の要素からナビゲーションを分離する改行または段落タグがあることを確認してください。

終わり！2 つのクラスの追加、CSS の 1 行 (ブートストラップ css ファイルを変更しないでください!)。

HTML:

<div class="col-md-12 text-center">
    <p>Copyright stuff</p>
    <ul class="nav nav-pills center-pills">
        <li><a href="#">Footer nav link</a></li>
        <li><a href="#">Footer nav link</a></li>
    </ul>
</div>

CSS:

.center-pills { display: inline-block; }

編集 2015 : Artur Beljajev が提起したように、Flexbox のサポートは現在十分に一般的であるため、代わりにそれを使用することをお勧めします。

.center-pills {
    display: flex;
    justify-content: center;
}

Answer 2

可変幅のコンテナーに可変幅のピルが必要な場合は、inline-block表示タイプを使用して、ピルコンテナーにクラスを追加することをお勧めします。

これが、ピルをセンタリングするためにブートストラップを拡張した方法です。

CSS：

.centered-pills { text-align:center; }
.centered-pills ul.nav-pills { display:inline-block; }
.centered-pills li { display:inline; }
.centered-pills a { float:left; }
* html .centered-pills ul.nav-pills { display:inline; } /* IE6 */
*+html .centered-pills ul.nav-pills { display:inline; } /* IE7 */

HTML：

<div class="row">
  <div class="span12 centered-pills">
    <ul class="nav nav-pills">
      <li><a href="#">derek</a></li>
      <li><a href="#">brooks</a></li>
      <li><a href="#">is</a></li>
      <li><a href="#">super</a></li>
      <li class="active"><a href="#">awesome</a></li>
    </ul>
  </div>
</div>

Answer 3

またはフレックスボックスアプローチ：

.nav-pills {
    display: flex;
    justify-content: center;
}

Answer 4

ピルを左揃えではなく中央に配置する場合は、css を変更する必要があります。幅を指定し、マージンを自動に変更する必要があります。

例えば：

.tabs, .pills {
    margin: 0 auto;
    padding: 0;
    width: 400px;
}

Answer 5

@minazの答えは既知の幅のリストで機能しますが、リストの内容を変更しても実際に機能する別のソリューションを提案します。

.tabs, .pills {
  text-align: center;
}

.tabs li, .pills li {
  float: none;
}

または SCSS で:

.tabs, .pills {
  text-align: center;
  li { float: none; }
}

これにより、リスト内のテキストが中央にfloat配置され、リスト項目のプロパティがリセットされ、プロパティの影響を受けtext-alignます。