我怎么能垂直居中<div>内的<div>？到目前为止我的代码：<div style="height:322px;overflow:auto;"> <div style="border: Solid 1px #999999;padding:5px;"> </div></div>我已经尝试过“ top：50％”；和“ vertical-align：middle”；没有成功编辑：好的，所以已经讨论了很多。我也许已经开始了另一场小型的火焰战争。但是为了论证，那我该如何用一个表呢？到目前为止，我已经将CSS用于其他所有内容，所以这并不是说我没有尝试采用“良好做法”。编辑：内部div没有固定的高度
3 回答
德玛西亚99
TA贡献1770条经验 获得超3个赞
简而言之，您已被塞满。我最近问了一个问题，您可以在不使用表的情况下进行HTML布局吗？ 基本上，CSS狂热者需要抓紧时间并意识到，有些事情如果没有表就无法做（或做得不好）。
这种反餐桌的歇斯底里简直荒唐可笑。
表格单元格可以很好地处理垂直居中，并且可以向后兼容。它们还比浮动，相对/绝对定位或任何其他CSS类型方法更好地处理并排内容。
乔尔创造了（或至少普及了）“ 不要让建筑宇航员吓到你 ”一词中的“建筑师宇航员” 。同样，我认为“ CSS宇航员”（或“ CSS太空少年”）一词同样适用。
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 来获得垂直居中。我很抱歉，但是无论谁写这封信-以及任何认为那是个好主意的人-都只是丢掉了情节。
在Tables vs CSS中提出了一个反驳：CSS Trolls begone。证明确实在布丁里。前20个（Alexa）网站中的绝大多数仍使用表格进行布局。 有充分的理由。
因此，请自己决定：您是否要让您的网站正常工作，并花费更少的时间使它正常工作？还是您想成为CSS宇航员？
BIG阳
TA贡献1859条经验 获得超6个赞
这是不平凡的，可能有一些警告，并且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>
慕容森
TA贡献1853条经验 获得超18个赞
我最喜欢这个解决方案。它适用于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>
- 3 回答
- 0 关注
- 371 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消