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

Question

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

Fab*_*bio 2 html css jquery vertical-alignment

很长一段时间我没有建立一个网站,我不记得如何以正确的方式垂直对齐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>

Run Code Online (Sandbox Code Playgroud)

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;
}

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

JSu*_*uar 5

使用CSS

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

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

使用jQuery

这个SO答案提供了一个动态的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();
});

Run Code Online (Sandbox Code Playgroud)

其他可能的方案:

使用jQuery垂直和水平居中div
如何在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);
Run Code Online (Sandbox Code Playgroud)
然后你可以使用$(‘.classname’).vAlign();或$(‘#image’).vAlign();- 确保在文档加载后使用它$(document).ready(function(){})!

归档时间：	11 年，10 月前
查看次数：	13872 次
最近记录：	10 年，8 月前