Jon*_*onH 20 html css alignment
我可以水平对齐div,所有内容看起来都很棒.寻找垂直对齐不包含任何表格的div.我尝试将保证金头寸设置为#container内部的一些负值,但这种方式有效.我知道CSS还不支持这个吗？
这是我的标记:
body
{
background: #777; /* gray */
text-align: center;
}
#container
{
margin: 0 auto;
width: 968px;
text-align: left;
}
#toptab
{
background: #f77; /* red */
height: 14px;
width: 968px;
}
#middletab
{
background: #7f7; /* green */
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: #77f; /* blue */
height: 14px;
width: 968px;
}<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.
</div>
</div>
<div id="bottomtab"></div>
</div>运行上面的代码段并点击"完整页面"以查看其当前外观.基本上,它看起来水平很好,但现在我需要它也在页面中垂直居中.
我想要垂直对齐的元素是#container div.该效果将强制整个div和所有子div不仅水平对齐而且垂直对齐.我知道这是可能的,我知道Andy Budd发布了这样的解决方案,但它似乎对我不起作用.
Cor*_*lou 21
除非您能够明确设置容器的高度(看起来不是这样),否则没有用于垂直居中DIV容器的跨浏览器解决方案.
使用表格是完全可行的,但您已注意到这不能使用.
如果javascript是一个选项,我们可以轻松地为您解决此问题.已存在用于垂直对齐容器的jQuery插件.
(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块:
$('#example').vAlign();
取自Simple Vertical Align Plugin.
看看使用CSS的垂直居中或使用CSS或CSS垂直居中垂直居中的内容.第一个参考的方法3与使用float和clear的CSS垂直中心相同.
使用browsershots.org等服务测试结果肯定是个好主意
编辑:我修改了你的CSS和标记来实现方法3:
CSS:
* {
margin:0;
padding:0;
}
html,
body {
height: 100%;
}
body {
text-align:center;
}
#floater {
float: left;
height:50%;
margin-bottom: -100px;
}
#container
{
clear:both;
position: relative;
margin: 0 auto;
width:968px;
text-align: left;
height: 200px;
}
...
标记:
<body>
<div id="floater"></div>
<div id="container">
...
我在这种方法中看到的缺点是,使用CSS你必须提前知道内容的高度,这样你就可以将这个高度的一半负余量应用到浮动内容.在我选择的例子中200px.