0

マージンを使用せずにページの中央にボックスを取得しようとしています。

私は試した-

.box-middle
{
vertical-align:middle;
height:100px;
width:100px;
border:1px solid #ddd;

}

これはまったく機能しません-

しかし、マージンプロパティを設定することは機能し、使用したくありませんmargin。マージンを与えると、レスポンシブ Web デザインが壊れるからです。

だから私はログインフォームを持っていて、ページの真ん中に設定したいと思っています。

ガイドしてください！

ここでは、このボックスでトリックを行うことができます-

真ん中に合わせてください

4

4 に答える 4

2

次の jQuery コードを使用します。

  $(window).resize(function(){

  $('.className').css({
    position:'absolute',
    left: ($(window).width() - $('.className').outerWidth())/2,
    top: ($(window).height() - $('.className').outerHeight())/2
  });

  });

// 最初に関数を実行するには:

 $(window).resize();
于 2013-04-20T20:23:00.203 に答える
1

私はあなたのフィドルフィドルを更新しました

.box-middle
 {
 text-align:center;
 margin: 50px auto;
 height:100px;
 width:100px;
 border:1px solid #ddd;
background:#98bf26;

 }

<div style="border:1px solid">
 <div class="box-middle"></div>
</div>
于 2013-04-20T10:21:00.103 に答える
0

これを試して：

.box-middle
{
margin-top:-50px;/*half the box's height*/
    margin-left:-50px;/*half the box's width*/
height:100px;
width:100px;
border:1px solid #ddd;
    background:#98bf26;
position: absolute;
top: 50%; left: 50%;

}

http://jsfiddle.net/LTec3/1/

于 2013-04-20T08:43:20.180 に答える