twitter-bootstrap - Twitterブートストラップで列を中央揃えにします

Question

ブートストラップの学習を開始しました。私の質問は、列を水平方向に中央揃えにする方法です。ブートストラップには 12 列のレイアウトが含まれており、中間の数字はありません。より明確にするために、11 列のレイアウトの場合、中央の数字は 6 になります (左に 5 列、中央に 1 列、右に 5 列)。

Answer 1

1列を配置できない場合は、真ん中に2列を配置するだけです...（回答を組み合わせているだけです）Bootstrap 3の場合

<div class="row">
   <div class="col-lg-5 ">5 columns left</div>
   <div class="col-lg-2 col-centered">2 column middle</div>
   <div class="col-lg-5">5 columns right</div>
</div>

さらに、これをスタイルに追加することで、列を中央揃えにすることもできます：

.col-centered{
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

さらに、ここに別の解決策があります

Answer 2

上記のアプローチを試しましたが、これらの方法は、いずれかの列のコンテンツの高さが動的に増加すると失敗し、基本的に他の列を押し下げます。

私にとっては、基本的なテーブル レイアウト ソリューションが機能しました。

// Apply this to the enclosing row
.row-centered {
  text-align: center;
  display: table-row;
}
// Apply this to the cols within the row
.col-centered {
  display: table-cell;
  float: none;
  vertical-align: top;
}