15

ブートストラップ スパン内の要素またはテキストを他のスパンに対して垂直方向に配置するための回避策はありますか

たとえば。このような行とスパンがある場合

<div class="row-fluid">
   <div class="span3" style="background-color:lightblue">Description</div>
   <div class="span9" style="background-color:pink">
   Lorem ipsum Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  ....
   </div>
</div>

このように見えます

ここに画像の説明を入力

「説明」を次のスパンの高さの中央に垂直に表示する方法はありますか?

4

7 に答える 7

2

display: table;親とdisplay: table-cell;子のために試してみてください

JSFiddle

于 2014-09-19T14:31:16.287 に答える
0

特定の画面サイズで要素を垂直方向に中央揃えしようとしている場合は、次のようなメディア クエリを常に使用できます。

/*tablet*/
@media (min-width: 768px) and (max-width: 979px) {
  #logo{
    margin-top:70px;
  }
}
/*desktop*/
@media (max-width: 979px) {
  #logo{
    margin-top:20px;
  }
}
/*large desktop*/
@media (min-width: 1200px) {
  #logo{
    margin-top:0;
  }
}
于 2012-10-31T18:55:58.940 に答える
0

私はこれに多くの作業をしましたが、使用による簡単な解決策 jquery がここに示されています!

<script>
$(document).ready(function(){
    var relheight=$('.span9').height() / 2;
    $('.span3').css('margin-top', relheight) ;

});
</script>

それは動作し、私もそれをテストしました。私の答えが気に入ったら、私に投票してください

于 2013-10-04T08:12:38.313 に答える
0

このスクリプトを使用しないソリューションを確認してください。

<div class="row-fluid">
   <div class="span3" style="background-color:lightblue;margin:0px auto;float:none;">Description</div>
   <div class="span9" style="background-color:pink;clear:both;margin:0px auto;float:none;">
   Lorem ipsum Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  ....
   </div>
</div>

実際のコード: jsFiddle

インライン スタイルを削除して、css ファイルに配置するだけです。

于 2013-11-12T11:12:15.137 に答える
0

Bootstrap では、このような問題に対する規定はありません。それは移植依存性です。ただし、次の div が前の div の高さを超える場合、前の div を次の div の中央の高さに揃えて、この種の動作が必要な場所にこのクラスを div に適用するという CSS ルールを作成できます。

于 2013-10-07T08:47:48.617 に答える
-1 
$('.row').each(function() {
  var rowHeight = $(this).height();
  $(this).find("[class^='span']").each(function() {
    if ( $(this).height() < rowHeight-20) {
      var odstep = (rowHeight - $(this).height()) / 2 ; 
      $(this).css( "padding-top", odstep );
    }
  });
});
于 2013-05-22T21:56:52.350 に答える