0

CSS を使用してアイテムを垂直方向に中央揃えするのに問題があります。以下の私のコードで何が問題なのかを誰かが提案できれば、私はそれを感謝します.

<head>
    <style>
        #container {
            height: 500px;
            background-color: yellow;
        }
        #test {
            height: 300px;
            background-color: blue;
            vertical-align: middle;
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <!-- <script type="text/javascript">

        function initialize() { /*
         $("div#container").css("background-color","yellow");
         $("div#container").height("500px");

         $("div#test").css("vertical-align","middle");
         $("div#test").css("background-color","blue");
         $("div#test").height("300px");
         */
         }
   </script>
   -->
</head>

<body onload="initialize()">
    <div id="container">
        <div id="test">test</div>
    </div>
</body>

4

2 に答える 2

4

jsBin デモ

(CSS: body{height:100%;})

ここで、jQuery を使用する場合は、ウィンドウのサイズ変更機能も必ず必要になります。

function initialize() {
   var divH = $('#test').innerHeight()/2;
   var pageH = $(window).innerHeight()/2;
   $('#test').css({top: (pageH-divH)});
}

initialize();

$(window).on('resize',function(){
  initialize();
});
于 2012-04-13T19:11:01.273 に答える
0

W3Cによると、vertical-align ルールは次の値を取ることができます。

  • ボックスのベースラインを親ボックスのベースラインに合わせます。ボックスにベースラインがない場合は、マージンの下端を親のベースラインに合わせます。
  • middle ボックスの垂直方向の中点を、親ボックスのベースラインに親ボックスの x 高さの半分を加えたものに揃えます。
  • sub ボックスのベースラインを、親のボックスの下付き文字の適切な位置まで下げます。(この値は、要素のテキストのフォント サイズには影響しません。)
  • super ボックスのベースラインを、親のボックスの上付き文字の適切な位置まで上げます。(この値は、要素のテキストのフォント サイズには影響しません。)
  • text-top ボックスの上部を親のコンテンツ領域の上部に揃えます (10.6.1 を参照)。
  • text-bottom ボックスの下部を親のコンテンツ領域の下部に揃えます (10.6.1 を参照)。
  • <percentage> ボックスをこの距離 ('line-height' 値のパーセンテージ) だけ上げる (正の値) または下げる (負の値)。値「0%」は「ベースライン」と同じことを意味します。
  • <length> この距離だけボックスを上げたり (正の値)、下げたり (負の値) します。値「0cm」は「ベースライン」と同じ意味です。

http://www.w3.org/wiki/CSS/Properties/vertical-align#Valuesおよびhttp://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-alignを参照してください。

また、css が正しく動作することを確認するまで、jQuery を使用せずに html と css だけで遊んでから、css が正常であることを確認したら、jQuery でドキュメントのスタイルを設定できるようにします。

于 2012-04-13T19:03:13.563 に答える