web-dev-qa-db-ja.com

bootstrapで垂直方向の配置を使用する方法

単純な問題：ブートストラップを使用して列内の列を垂直に整列するにはどうすればよいですか？ここの例（child1aとchild1bを垂直に揃えたい）：

http://bootply.com/73666

HTML

<div class="col-lg-12">

  <div class="col-lg-6 col-md-6 col-12 child1">
    <div class="col-12 child1a">Child content 1a</div>
    <div class="col-12 child1b">Child content 1b</div>

  </div>


  <div class="col-lg-6 col-md-6 col-12 child2">
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>
  Child content 2<br>

  </div>

</div>

UPDATE

いくつかのCSS：

.col-lg-12{
top:40px;
bottom:0px;
border:4px solid green;


}

  .child1a, .child1b{
  border:4px solid black;
  display:inline-block !important;
}

.child1{
  border:4px solid blue;
  height:300px;
  display:table-cell !important;
  vertical-align:middle;
}

.child2{
  border:4px solid red;
}
css3twitter-bootstraptwitter-bootstrap-3
51
alias51
.parent {
    display: table;
    table-layout: fixed;
}

.child {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

table-layout: fixedは、col- *クラスの機能の破壊を防ぎます。

69
magirtopcu

古いトピックかもしれませんが、誰かがこれについてさらに助けが必要な場合は、たとえば次のようにします（テキストよりも高さが大きい場合、画像の中央の行にテキストを配置します）。

HTML：

<div class="row display-table">
    <div class="col-xs-12 col-sm-4 display-cell">
        img
    </div>
    <div class="col-xs-12 col-sm-8 display-cell">
        text
    </div>
</div>

CSS：

.display-table{
    display: table;
    table-layout: fixed;
}

.display-cell{
    display: table-cell;
    vertical-align: middle;
    float: none;
}

私が見逃した重要なことは、「float：none;」でした。 bootstrap col属性からフロートが残ったためです。

乾杯！

41
prinsen

親の場合：display: table;

子の場合：display: table-cell;

次に、vertical-align: middle;を追加します

私はフィドルを作ることができますが、今はホームタイムです！

ここに素敵なフィドルがあります： http://jsfiddle.net/lharby/AJAhR/

.parent {
   display:table;
}

.child {
   display:table-cell;
   vertical-align:middle;
   text-align:center;
}
8
lharby

幅を追加する必要がありました：100％;この例を使用したときに、IEとFFの奇妙な動作を修正するためにテーブルを表示します。 IEおよびFFには、col-md- *タグを正しい幅で表示する際に問題が発生しました

.display-table {
        display: table;
        table-layout: fixed;
        width: 100%;
}

.display-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
}
6
southz rgw

http://jsfiddle.net/b9chris/zN39r/

HTML：

<div class="item row">
    <div class="col-xs-12 col-sm-6"><h4>This is some text.</h4></div>
    <div class="col-xs-12 col-sm-6"><h4>This is some more.</h4></div>
</div>

CSS：

div.item div h4 {
    height: 60px;
    vertical-align: middle;    
    display: table-cell;
}

重要な注意事項：

  • vertical-align: middle; display: table-cell;は、Bootstrapクラスが適用されていないタグに適用する必要があります。 col-*、rowなどにすることはできません。
  • 残念ながら、この余分な、おそらく無意味なタグなしでこれを行うことはできません。
  • 背景は不要です-それらはデモ目的のためだけにあります。そのため、rowまたはcol-*タグに特別なルールを適用する必要はありません。
  • 内部タグが親の幅の100％まで伸びないことに注意することが重要です。私たちのシナリオでは、これは重要ではありませんでしたが、あなたにとってはそうかもしれません。もしそうなら、あなたはここで他の答えのいくつかに近いものになります：

http://jsfiddle.net/b9chris/zN39r/1/

CSS：

div.item div {
    background: #fdd;
    table-layout: fixed;
    display: table;
}
div.item div h4 {
    height: 60px;
    vertical-align: middle;    
    display: table-cell;
    background: #eee;
}

col-*タグに追加されたテーブルレイアウトおよび表示プロパティに注目してください。これはcol-*が適用されているタグに適用する必要があります。他のタグでは役に立ちません。

2
Chris Moschini

Prinsenの答えが最良の選択です。ただし、列が崩れない問題を修正するには、コードをメディアチェックステートメントで囲む必要があります。このように、これらのスタイルは、大きな列がアクティブな場合にのみ適用されます。更新された完全な回答を次に示します。

HTML：

<div class="row display-table">
    <div class="col-xs-12 col-sm-4 display-cell">
        img
    </div>
    <div class="col-xs-12 col-sm-8 display-cell">
        text
    </div>
</div>

CSS：

@media (min-width: 768px){
   .display-table{
       display: table;
       table-layout: fixed;
   }

   .display-cell{
       display: table-cell;
       vertical-align: middle;
       float: none;
   }
}
1
Z3NF1N1TY