所以我知道vertical-align: middle;
人们在 CSS 中垂直对齐元素的问题和不同的方法。但我还没有找到一个适合我需要它工作的东西。
基本上我的页面上只有一个<div>
,我希望将其放置在页面的中心,水平和垂直。显然水平部分很容易,但我被垂直部分挂断了。我的问题是高度<div>
未知;内容发生了变化,所以我无法为其指定高度。
有人对我有什么建议吗?如有必要,我愿意使用 JavaScript。谢谢!
所以我知道vertical-align: middle;
人们在 CSS 中垂直对齐元素的问题和不同的方法。但我还没有找到一个适合我需要它工作的东西。
基本上我的页面上只有一个<div>
,我希望将其放置在页面的中心,水平和垂直。显然水平部分很容易,但我被垂直部分挂断了。我的问题是高度<div>
未知;内容发生了变化,所以我无法为其指定高度。
有人对我有什么建议吗?如有必要,我愿意使用 JavaScript。谢谢!
正如你所说你不介意使用 JS,这里是......(我通常从不回退到 JS 解决方案,但如果你对它很酷,那么我也是)
如果你的 CSS 是
#element {
position: absolute;
top: 50%;
}
然后你可以使用我的朋友 jQuery
$(document).ready(function() {
var height = $('#element').height();
$('#element').css({marginTop: '-' + (height / 2) + 'px'})
{);
请注意,这是未经测试的,但应该是一个开始。希望 height / 2 能按预期工作,如果没有,请尝试使用parseInt()
;