1

div を垂直方向にセンタリングするためのテクニックはたくさんありますが、私の考えに従ってこれを作成しました。コンセプトは正しいと思いますが、100% の結果が得られていません。

ここにジャバスクリプトがあります

jQuery(document).ready(function(){
  var l=jQuery('.div1').height();
  var level=l/2;
  var bt=jQuery('.div2').height()/2;
  var val=level-bt;
  jQuery('.div2').css("margin-top",val);
});

CSS

.div1
{
  height:50px;
  background-color: red;
  position:relative;    
}
.div2
{
    border: 1px solid;
    background-color: orchid;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform:uppercase;
    padding: 5px;
    position: absolute;
    right:5%;
    top:0%

}

HTML

<div class="div1"><div class="div2">vertical</div>
  1. 外側の div の高さを計算し、それを 2 で割って中心を計算しました。
  2. 中心にすべき div center を計算します. ここにあります.div2
  3. div2結果として、高さの半分を高さの半分に減らします。それをdiv1マージントップとして指定すると、垂直方向に中央に配置できるはずです。私は正しいですか？そうでない場合、誰かが私に説明できますか？

フィドルをチェックする

4

4 に答える 4

0

outerHeightパディングを無視するために使用します。

jQuery(document).ready(function () {
    var l = jQuery('.div1').outerHeight();
    var level = l / 2;
    var bt = jQuery('.div2').outerHeight() / 2;
    var val = level - bt;
    jQuery('.div2').css("margin-top", val);
});

http://jsfiddle.net/DZxW2/1/

于 2013-09-10T11:34:23.280 に答える