0

こんにちは、私の質問は次のとおりです。

私は html/css Web サイトを持っており、いくつかの親と子の div があります。親と子のdivの高さを見つけ、子を親の中央に配置するために必要なcssを追加するスクリプト(Jquery?)を作成する必要があります...

<div class="parent">
 <div class="child">
 </div>
</div>
.....
<div class="parent">
 <div class="child">
 </div>
</div>
....
<div class="parent">
 <div class="child">
 </div>
</div>

<SCRIPT>
???
</SCRIPT>

皆さんありがとう...

4

5 に答える 5

1

jQuery を使用:

LIVE DEMO

$('.parent').each(function(){

  var $pa = $(this);
  var $ch = $pa.find('.child');
  var paH = $pa.innerHeight();
  var chH = $ch.innerHeight();

  $ch.css({marginTop: (paH-chH)/2});

});

内部に画像がある場合は、その画像にプロパティを割り当てるか、関数内にJSを配置して呼び出すことをお.child勧めしますheight=""$(window).load(function(){ /*here*/ });

于 2013-02-21T11:00:04.313 に答える
0

これを行う別の方法displayは、親 div のプロパティをに設定することtable-cellです。コードは次のとおりです。

<div style="display:table-cell; height:200px; border:1px solid red; vertical-align:middle; align: center;">
    <div style="height:100px; border:1px solid blue;">The content</div>
</div>

そして、これは次のようになります。

http://screencast.com/t/6kB9ec1uV

子 div を中央に配置する以外に何かしたい場合を除き、スクリプトは必要ありません。すてきな一日を ！

于 2013-02-21T10:58:52.707 に答える
0

次の jQuery コードを試すことができます。

$(document).ready(function () {
  var childHeight  = $('.child').css('margin-top', function() {
    var childHeight = $(this).height();
    var parentHeight = $(this).parent().height();
    return ((parentHeight - childHeight) / 2);
  });
});

基本的に、ドキュメントがロードされた後、
すべての DOM 要素の高さをクラスの子と相対親で取得します。これは、子 objのmargin-top
値 を計算するために必要です。

于 2013-02-21T11:08:58.070 に答える
0

私がUIを理解していれば、このCSSのビットでそれを行うことができると思います:

.parent {
  height: auto;
  overflow: hidden; /* This actually makes height auto */
  padding: 10px 0; /* exmaple of 10px up and down that will actully center it with some space IF space is needed*/
}
于 2013-02-21T10:56:14.290 に答える
0

ここでは jQuery を使用する必要はありません。以下のリンクに示すようにoverflow:auto組み合わせて使用​​できます。margin

働くフィドル

.parent{overflow:auto;width:100px;height:100px;background-color:green;margin-bottom:10px;}
.child{width:50px;height:50px;background-color:blue;margin:25px;}

ここでピクセルをパーセンテージに置き換えることもできます。

これは、の代わりにfloatまたはdisplayプロパティを使用して行うこともできますoverflow:auto。

于 2013-02-21T10:56:43.153 に答える