垂直对齐格（无表） [英] Vertically align div (no tables)
问题描述
我可以水平对齐分区，所有的内容看起来不错。 展望垂直对齐不包含任何表的分区。 我尝试设置#container的内部保证金头寸一些负值 但那种工作。我知道CSS是不支持这个吗？
I can horizontally align a div and all the content looks nice. Looking to vertical align a div that does not contain any tables. I tried setting margin positions to some negative values inside of the #container but that sort of worked. I know CSS isn't supporting this yet?
下面是我的标记：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>
</title>
</head>
<style type="text/css">
body
{
background: #000000 url(body_bg.gif) repeat-x;
text-align: center;
}
#container
{
margin:0 auto;
width:968px;
text-align: left;
}
#toptab
{
background: url(panel_top.png);
height: 14px;
width: 968px;
}
#middletab
{
background: url(panel_bg.png);
width: 968px;
}
#data
{
width:948px; /* 948 for the box plus we need 20 more px to handle the padding */
padding-left:10px;
padding-right:10px;
}
#bottomtab
{
background: url(panel_bottom.png);
height: 14px;
width: 968px;
}
</style>
<body>
<div id="container">
<div id="toptab"></div>
<div id="middletab">
<div id="data">
The quick brown fox jumped over the big red bear. The quick brown fox jumped over the big red
bear. The quick brown fox jumped over the big red bear. The quick brown fox jumped over the big
red bear. The quick brown fox jumped over the big red bear. The quick brown fox
jumped over the big red bear. The quick brown fox jumped over the
big red bear. The quick brown fox jumped over the big red bear. The quick brown fox jumped over the
big red bear. The quick brown fox jumped over the big red bear. The quick brown fox jumped over the
big red bear. The quick brown fox jumped over the big red bear. The quick brown fox jumped over the big
red bear.
</div>
</div>
<div id="bottomtab"></div>
</div>
</body>
</html>
仔细查看在#container的，这是我想垂直对齐容器。效果会迫使整个格和所有子的div不仅被水平对齐，但也垂直。我知道这是可能的，我知道安迪·布贴这样的解决方案，但它似乎并没有为我工作！
Take a close look at the #container, this is the container I want to align vertically. The effect would force the entire div and all sub divs to not only be horizontally aligned but also vertically. I know this is possible and I know andy budd posted such a solution but it doesn't seem to work for me!
下面是该网页目前是这样的：
Here is what the page currently looks like:
所以它看起来很大水平，但现在我需要它在页面垂直居中。
So it looks great horizontally but now I need it to center vertically in the page.
推荐答案
除非你必须明确地设置您的容器中（犯规的样子是那样的话）的高度的能力，有不跨浏览器解决方案作为垂直居中的DIV容器。
Unless you have the ability to explicitly set the height of your container (which doesnt look like that's the case), there is no cross browser solution for vertically centering your DIV container.
使用表是完全可行的，但已指出，这不能被使用。
Using a table is completely viable, but you have noted that this cannot be used.
如果JavaScript是一种选择，我们可以很容易地解决这个问题给你。 jQuery插件已经存在垂直排列的容器中。
If javascript is an option, we could easily remedy this for you. A jQuery plugin already exists for vertically aligning a container.
(function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = (ph - ah) / 2;
$(this).css('margin-top', mh);
});
};
})(jQuery);
和你垂直对齐的DIV块像这样：
And you would vertically align a DIV block like so:
$('#example').vAlign();
从
这篇关于垂直对齐格（无表）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
