24 css
我怎么能垂直居中<div>内的<div>？
我的代码到目前为止:
<div style="height:322px;overflow:auto;">
<div style="border: Solid 1px #999999;padding:5px;">
</div>
</div>
我试过"顶级:50%;" 和"vertical-align:middle;" 没有成功
编辑:好的,所以它已被讨论了很多.而且我可能会开始另一场迷你火焰战.但为了争论,我怎么用桌子做呢？到目前为止,我已经将css用于其他所有事情,所以我并不想尝试使用"良好实践".
编辑:内部div没有固定的高度
cle*_*tus 33
简而言之,你被塞满了.在最近的一个问题中有更多相关内容我问过你可以在不使用表的情况下进行HTML布局吗？ 基本上,CSS狂热分子需要掌握,并意识到只有一些事情你不能做(或不能做好)没有表.
这种反桌歇斯底里是荒谬的.
表格单元格可以很好地处理垂直居中,并且可以根据您的需要向后兼容.它们还比浮点数,相对/绝对定位或任何其他CSS类型方法更好地处理并排内容.
乔尔在" 不要让建筑宇航员吓唬你 "中创造(或至少推广)"建筑师宇航员"一词.那么,同样地,我认为术语"CSS宇航员"(或"CSS Space Cadet")同样合适.
CSS是一个非常有用的工具,但它也有一些非常严重的限制.我最喜欢的是编号列表可能只显示为"3".但不是"3)"或"(3)"(至少在CSS3生成内容之前 - 或者是CSS2.1？无论哪种方式都没有得到广泛支持).多么疏忽.
但比这更大的是垂直居中和并排布局.对于纯CSS来说,这两个领域仍然是一个巨大的问题.另一张海报决定了相对定位和负边距高度是要走的路.怎么会比这更好:
<html>
<head>
<title>Layout</title>
<style type="text/css">
#outer { height: 200px; border: 1px solid black; width: 600px; background-color: #DDD; }
#inner { width: 150px; border: 1px solid red; background: yellow; margin: auto; line-height: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td id="outer">
<div id="inner">Inner</div>
</td>
</tr>
</table>
</body>
</html>
每次都可以在任何地方使用.
这是一篇关于CSS中垂直居中的文章.为了达到类似的目的,他们使用三个嵌套的div与相对+绝对+相对定位,以获得垂直居中.我很抱歉,无论是谁写的 - 以及任何认为这是一个好的迪亚的人 - 都已经失去了情节.
表格与CSS中给出了一个反驳:CSS Trolls begone.证据确实存在于布丁中.绝大多数前20名(Alexa)网站仍然使用表格进行布局. 有充分的理由.
因此,自己决定:您希望您的网站工作,花更少的时间让它工作吗？或者你想成为一名CSS宇航员？
这不是一件容易的事,可能会有一些警告,而且这不是CSS在这一点上处理得好的东西.
无论你做什么,请不要回到桌子上.
编辑:这很荒谬,以下在严格的文档中完美地运行,而不需要使用表格标记:
<style type="text/css">
.outer {height: 322px; overflow: hidden; position: relative;}
*|html .outer {display: table; position: static;}
.middle {position: absolute; top: 50%;}
*|html .middle {display: table-cell; vertical-align: middle; position: static;}
.inner {position: relative; top: -50%; overflow: auto;}
*|html .inner {position: static; max-height: 322px;}
</style>
<!--[if IE]>
<style>
.inner {height: expression(Math.min(this.scrollHeight,322)+'px'); width: 100%;} /* for explorer only */
</style>
<![endif]-->
<div class="outer">
<div class="middle">
<div class="inner">
Any text any height
</div>
</div>
</div>
我最喜欢这个解决方案.它适用于IE8 +,易于理解.
<style>
/* Can be any width and height */
.block {
height:500px;
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can be any width or height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
</style>
<div class="block"><div class="centered">Centered Content</div></div>
最高:50%; 应该管用.你需要将margin-top设置为负高度的一半,否则它将从中间开始.因此,您需要内部div的高度.你也可能需要职位:亲属;
对你来说这样的内心div.
position:relative;
top: 50%;
height:80px;
margin-top: -40px; /*set to a negative number 1/2 of your height*/
使用负尺寸不是很整洁(它甚至意味着什么？)但也许是最简单的方法.
| 归档时间： |
|
| 查看次数： |
9708 次 |
| 最近记录： |