我怎么能垂直居中<div>內(nèi)的<div>？到目前為止我的代碼：<div style="height:322px;overflow:auto;"> <div style="border: Solid 1px #999999;padding:5px;"> </div></div>我已經(jīng)嘗試過“ top：50％”；和“ vertical-align：middle”；沒有成功編輯：好的，所以已經(jīng)討論了很多。我也許已經(jīng)開始了另一場小型的火焰戰(zhàn)爭。但是為了論證，那我該如何用一個表呢？到目前為止，我已經(jīng)將CSS用于其他所有內(nèi)容，所以這并不是說我沒有嘗試采用“良好做法”。編輯：內(nèi)部div沒有固定的高度
3 回答
德瑪西亞99
TA貢獻(xiàn)1770條經(jīng)驗 獲得超3個贊
簡而言之，您已被塞滿。我最近問了一個問題，您可以在不使用表的情況下進(jìn)行HTML布局嗎？ 基本上，CSS狂熱者需要抓緊時間并意識到，有些事情如果沒有表就無法做（或做得不好）。
這種反餐桌的歇斯底里簡直荒唐可笑。
表格單元格可以很好地處理垂直居中，并且可以向后兼容。它們還比浮動，相對/絕對定位或任何其他CSS類型方法更好地處理并排內(nèi)容。
喬爾創(chuàng)造了（或至少普及了）“ 不要讓建筑宇航員嚇到你 ”一詞中的“建筑師宇航員” 。同樣，我認(rèn)為“ CSS宇航員”（或“ CSS太空少年”）一詞同樣適用。
CSS是一個非常有用的工具，但是它也有一些嚴(yán)重的局限性。我最喜歡的編號列表可能只顯示為“ 3”。但不是“ 3）”或“（3）”（至少在CSS3生成的內(nèi)容之前-還是CSS2.1？這兩種方式均未得到廣泛支持）。真是個疏忽。
但更大的是垂直居中和并排布局。對于純CSS而言，這兩個領(lǐng)域仍然是一個巨大的問題。另一位張貼者認(rèn)為，相對定位加上負(fù)邊距高度是必經(jīng)之路。有什么比以下更好的了：
<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>
它將隨時隨地工作。
這是有關(guān)CSS垂直居中的文章。為了實現(xiàn)類似的目的，他們使用三個具有相對+絕對+相對定位的嵌套div 來獲得垂直居中。我很抱歉，但是無論誰寫這封信-以及任何認(rèn)為那是個好主意的人-都只是丟掉了情節(jié)。
在Tables vs CSS中提出了一個反駁：CSS Trolls begone。證明確實在布丁里。前20個（Alexa）網(wǎng)站中的絕大多數(shù)仍使用表格進(jìn)行布局。 有充分的理由。
因此，請自己決定：您是否要讓您的網(wǎng)站正常工作，并花費更少的時間使它正常工作？還是您想成為CSS宇航員？
BIG陽
TA貢獻(xiàn)1859條經(jīng)驗 獲得超6個贊
這是不平凡的，可能有一些警告，并且CSS還不能很好地處理這一點。
但是，它已被廣泛討論并可以谷歌搜索。這是一個很好的例子。
無論您做什么，都請不要退回表格。
編輯：這很荒謬，以下代碼在嚴(yán)格的文檔中可以很好地工作而無需求助于表標(biāo)記：
<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貢獻(xiàn)1853條經(jīng)驗 獲得超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>
添加回答
舉報
0/150
提交
取消