Question

我很长时间没有建立网站而且我不记得如何以正确的方式垂直对齐div。我检查了很多在线资源和stackoverflow问题，但没有任何帮助，或者至少我没有看到我的错误在哪里。

我创建了一个开头隐藏的文本，经过一段时间后出现并使用jQuery扩展。它似乎工作，它是水平居中，但不是垂直居中。如何垂直对齐页面中心？

HTML

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link href="main.css" rel="stylesheet" />
<title>Homepage</title>
<script src="jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="container" align="center">
<p id="robo">ROBO</p>
</div>
<script>
$(document).ready(function() {
    $("#robo").delay(500).fadeIn(500).animate({fontSize: "3em"}, 1000);
}); 
</script>

</body>
</html>

CSS

*{
    margin: 0px;
    padding: 0px;
}
body {
    text-align: center;
    width: 100%;
}
#container {
    width: 1024px;
    height: 768px;
    margin: 0 auto;
}
#robo {
  display:none;
  width:200px;
  height:200px;
}

JSFiddle示例：http://jsfiddle.net/sMrL9/

Answer 1

使用CSS

下面的链接提供了五种垂直居中方法，每种方法的优缺点以及如何实现每种方法。我建议您查看该页面。

http://www.vanseodesign.com/css/vertical-centering/

使用jQuery

This SO answer提供了动态的jQuery解决方案。

工作小提琴：http://jsfiddle.net/sMrL9/1/

jQuery.fn.verticalAlign = function ()
{
    return this
            .css("margin-top",($(this).parent()
            .height() - $(this).height())/2 + 'px' )
};

$(document).ready(function() {
    $("#robo").delay(500)
              .fadeIn(500)
              .animate({fontSize: "3em"}, 1000)
              .verticalAlign();
});

其他可能的解决方案：

Centering a div vertically & horizontally using jQuery
How do I vertical center text next to an image in html/css?

http://atomiku.com/2012/02/simple-jquery-plugin-for-vertically-centering/

(function ($) {
        // VERTICALLY ALIGN FUNCTION
        $.fn.vAlign = function() {
            return this.each(function(i){
            var ah = $(this).height();
            var ph = $(this).parent().height();
            var mh = Math.ceil((ph-ah) / 2);
            $(this).css('margin-top', mh);
            });
        };
    })(jQuery);
然后您可以使用$(‘.classname’).vAlign();或$(‘#image’).vAlign(); - 确保在文档拥有后使用此功能在$(document).ready(function(){})内加载！

将元素水平和垂直对齐到页面中心

1 个答案:

使用CSS

使用jQuery