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，那么你肯定还需要一个 on window resize 函数：

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，垂直对齐规则可以采用以下值：

  • 基线 将框的基线与父框的基线对齐。如果框没有基线，则将底部边距边缘与父项的基线对齐。
  • 将框的垂直中点 与父框的基线加上父框 x 高度的一半对齐。
  • sub 将框的基线降低到父框下标的正确位置。（此值对元素文本的字体大小没有影响。）
  • super 将框的基线提高到父框上标的正确位置。（此值对元素文本的字体大小没有影响。）
  • text-top 将框的顶部与父内容区域的顶部对齐（参见 10.6.1）。
  • text-bottom 将框的底部与父级内容区域的底部对齐（参见 10.6.1）。
  • <percentage> 将框升高（正值）或降低（负值）此距离（“行高”值的百分比）。值“0%”与“基线”的含义相同。
  • <length> 将框升高（正值）或降低（负值）该距离。值“0cm”与“基线”的含义相同。

请参阅http://www.w3.org/wiki/CSS/Properties/vertical-align#Values和http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

我也会在没有 jQuery 的情况下只使用 html 和 css，直到你确定你的 css 工作正常，然后在你确定你的 css 没问题时让 jQuery 为你的文档设置样式。

于 2012-04-13T19:03:13.563 回答