1

ユーザーの解像度に関係なく、画面の中央 (水平および垂直) に表示したいログイン ボックスがあるログイン画面を作成しています。

見回したところ、コンテンツを水平方向に中央揃えするチュートリアル/記事しか見つかりませんでした。これは、私が望むものの半分です。

両方の面で集中化を達成する方法はありますか?

4

3 に答える 3

5

最善の方法は、古い IE バージョン用の CSS と Javascript コールバックを使用することです。

CSS

.center {
   width: 300px;          // your login div width
   height: 300px;         // your login box height
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;   // width/2
   margin-top: -150px;    // height/2
}

HTML

<div class="center">
    Hey dude, I'm in the middle!
</div>

実際の例

http://jsfiddle.net/86Asb/

負のマージンは、高さと幅のちょうど半分であり、要素を完全な中央に引き戻します。固定の高さ/幅の要素でのみ機能します。これは、おそらくIE6、IE7を除くすべてのブラウザで機能します。

于 2013-01-14T07:54:08.520 に答える
2

アイテムを垂直方向に中央揃えにする唯一の方法は、javascript を使用することです。これは、jquery と CSS による絶対配置を使用して行う方法の簡単な例です。jsfiddle と従うべきコードへのリンク。

http://jsfiddle.net/AlienHoboken/XCPGe

Javascript:

$(document).ready(function() {
  var width = $('#test').css('width');
  var height = $('#test').css('height');
  width = width.replace('px', '');
  height = height.replace('px', '');
  $('#test').css('left', ($(window).width()/2) - (width/2));
  $('#test').css('top', ($(window).height()/2) - (height/2));
});

CSS:

#test {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #000000;
}
于 2013-01-14T06:19:51.963 に答える