jQuery中的CSS垂直居中答案

【问题标题】：CSS Vertical Centering in jQuery [duplicate]jQuery中的CSS垂直居中
【发布时间】：2012-04-26 03:47:12
【问题描述】：

我在使用 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>

【问题讨论】：

Vertically center align text的可能重复
text-middle 是否存在？我知道对齐（除其他外）：middle 和 text-top，text-bottom
"text-middle" 可能不存在。但是当我实现上面的编辑（“text-middle”替换为“middle”）它仍然不起作用。
这不是重复的问题。
+1 先删除text-middle

标签： jquery css html vertical-alignment html-formatting

【解决方案1】：

根据W3C，vertical-align 规则可以取以下值：

基线将框的基线与父框的基线对齐。如果框没有基线，则将下边距边缘与父级的基线对齐。

中将框的垂直中点与父框的基线加上父框 x 高度的一半对齐。

子将框的基线降低到父框下标的正确位置。（该值对元素文本的字体大小没有影响。）

超级将框的基线提升到父框上标的正确位置。（该值对元素文本的字体大小没有影响。）

文本顶部 将框的顶部与父内容区域的顶部对齐（参见 10.6.1）。

文字底部 将框的底部与父级内容区域的底部对齐（参见 10.6.1）。

将框升高（正值）或降低（负值）该距离（“行高”值的百分比）。值“0%”与“基线”的含义相同。

将框升高（正值）或降低（负值）该距离。值“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 为你的文档设置样式。

【讨论】：

感谢您的信息。我已经尝试在已编辑的代码中实现您的建议，但我仍然没有看到 vertical-align 属性对布局有任何影响。任何建议将不胜感激。
更多地查看 w3c 和您的示例，我注意到规范说垂直对齐规则适用于内联级元素。 “div”是块级元素。如果您设置使用 div，我什至不会打扰垂直对齐。如果您想很好地了解如何使用垂直对齐，并附上示例，请参阅http://css-tricks.com/what-is-vertical-align/

【解决方案2】：

jsBin demo

（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();
});

【讨论】：

如此简单，如此聪明，GRRREAT！！