将元素水平和垂直对齐到页面的中心[重复]
Posted
技术标签:
【中文标题】将元素水平和垂直对齐到页面的中心[重复]【英文标题】：Align element horizontally and vertically to the center of the page [duplicate] 【发布时间】：2014-01-22 06:05:29 【问题描述】：很久没做网站了，不记得如何正确垂直对齐 div 了。我检查了许多在线资源和 *** 问题，但没有任何帮助，或者至少我没有看到我的错误在哪里。
我创建了一个文本，该文本在开始时是隐藏的，一段时间后会出现，并且使用 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/
【问题讨论】：
你搜索了吗？使用您的标题：***.com/… 是的，我搜索过。我说使用***上已经给出的一些答案我无法解决问题。可能有什么问题我暂时看不到。如果有人可以帮助我修复它，我将不胜感激。 【参考方案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())内！
【讨论】：
谢谢，使用 jquery 的解决方案有效。我更喜欢仅使用 CSS 的解决方案，而不使用 javascript/jquery 垂直对齐到页面中心。 “垂直对齐：中间；”属性似乎不起作用，我之前尝试过。 您已经在使用 jQuery，所以不知道为什么要忍受不使用 CSS 的痛苦。我将尝试只创建一个 CSS 解决方案。此外，vertical-align 不像您想象的那样工作。我建议阅读它。 @Fabio 如果您仍然无法让 CSS 解决方案发挥作用，请告诉我。以上是关于将元素水平和垂直对齐到页面的中心[重复]的主要内容，如果未能解决你的问题，请参考以下文章