2012年1月31日火曜日

CSS - jQueryで垂直中央に配置する

jQueryを使ってボタンを親要素の高さの真ん中に配置したいと思います。単純なことですが、ちょっとはまったので、切り出して試しました。cssでheightを100%にするの忘れてたり、jQueryでtopを設定するときに'px'の2文字を入れ忘れたりしていただけでしたが、せっかく切り出して試したのでメモります。


下記のコードはブラウザで上記のような画面になります。まさしくボタンが中央に配置されています。

Html

<div id="box">
     <ul>
          <li class="a">aaaaaa
          <li class="b">bbbbbb
          <li class="c"><input id="btn" type="button" value="cccccc" />
     </ul>
</div>

css

#box{
     height:150px;
     background-color:#333;
     width:400px;
}
ul{
     margin:0;
     padding:0 10px;
     list-style-type: none;
     height:100%;
}
li{
     float:left;
}
.a{
     width:100px;
     background-color:#f00;
     height:100%;
}
.b{
     width:150px;
     background-color:#0f0;
}
.c{
     width:100px;
     background-color:#00f;
     height:100%;
     position:relative;
}
#btn{
     position:absolute;
}

javascript

$(function(){
     $(document).ready(function(){
          var btnh = $('#btn').outerHeight(true);
          var ch = $('.c').outerHeight(true);
          $('#btn').css('top',(ch-btnh)/2+'px');
     });
});

0 件のコメント:

コメントを投稿