51

簡単な問題: ブートストラップを使用して列内で列を垂直方向に揃えるにはどうすればよいですか? ここに例を示します (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>

アップデート

いくつかの 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;
}
4

8 に答える 8

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

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

table-layout: fixedcol-* クラスの機能が損なわれるのを防ぎます。

于 2013-10-03T08:40:09.580 に答える
6

width: 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;
}
于 2015-04-30T17:54:36.997 に答える
2

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-*、arowなどにすることはできません。
  • 残念ながら、これは、HTML にこの余分な、おそらく無意味なタグがなければ実行できません。
  • 背景は不要です - それらはデモ目的のためだけにあります. 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-*タグに table-layout と display プロパティが追加されていることに注目してください。これは、適用されたタグに適用する必要がありますcol-*。他のタグでは役に立ちません。

于 2014-07-28T05:54:07.437 に答える
-1

1bと1bを並べ たいということですか？

 <div class="col-lg-6 col-md-6 col-12 child1">
      <div class="col-6 child1a">Child content 1a</div>
      <div class="col-6 child1b">Child content 1b</div>
 </div>
于 2013-08-12T16:38:10.683 に答える
-3

Bootstrap 4 では、より簡単に行うことができます: http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#vertical-alignment

于 2016-10-18T20:58:09.220 に答える