與CSS垂直對齊
[英]Vertical alignment with CSS
問題描述
是的，是的，我知道這是關於與CSS垂直對齊的另一個問題，它之前已經完成了一百萬次。 請放心，我已經多次遇到過這個問題，而且我已經完成了關於使用CSS垂直居中的各種方法的閱讀。 我在這里問，因為這些方法都沒有做我想做的事情，我只想確保我的懷疑（CSS垂直對齊被破壞而不會做我想做的事情）絕對是正確的。
首先，這是我的測試用例： http ： //www.game-point.net/misc/testAlign/
這是標准：
- 我想垂直對齊'居中文本'，相對於包含'TestTestTest ...'文本的DIV。
- 我不想指定任何高度。
- 我希望'TestTestTest'和'Centered text'DIV根據它們的文本數量和它們的寬度限制動態地獲得它們的高度。
- 我不想使用Javascript。
即使在CSS3中，這似乎也是不可能的，更不用說CSS2了。 令人討厭的是我幾乎就在那里; position:absolute; top:-50%; position:absolute; top:-50%; DIV用於將DIV的頂部設置為容器DIV的一半。 問題是內部DIV，風格position:relative; top:-50%; position:relative; top:-50%; 沒有做任何事情將內容向上移動一半的高度，使其完全居中，因為CSS說絕對定位的DIV沒有高度，因此top:-50%沒有意義。 據我所知，這只是CSS中的一個根本缺陷，沒有特別的原因。 一個絕對定位的元素確實有一個高度，我不知道為什么CSS假裝它沒有。 我只是想問一下是否有人對我如何達到預期的效果有任何想法，如圖所示我在上面列出的標准。 具有諷刺意味的是IE6 / 7/8的'破碎'盒子模型，在怪癖模式下，給了我這種效果。 很遺憾他們在IE9中'修復'它所以它不再存在了。
5 個解決方案
解決方案1
5 已采納 2011-02-01 10:29:58
好吧，我的懷疑確實是正確的，這是不可能的（我認為這是CSS的一個缺陷，他們應該提供一種在DIV內垂直對齊的方法，而不指定內部元素的高度）。
我最終得到的最不好的解決方案是：指定“中間”DIV的高度 - 即使用position:absolute顯示的DIV並包含真實內容。 我已經將它添加到測試用例頁面http://www.game-point.net/misc/testAlign/ ，標題為“行高”：100％和硬編碼“中間”DIV高度 。 這個解決方案意味着你必須事先知道要垂直居中的內容的高度，這很糟糕，因為瀏覽器計算了這個並且您不需要指定它，但這是唯一的方法（直到CSS一起行動）。 我也用em來指定高度，這樣縮放文本就不會破壞垂直居中。 事實證明，對於我所擁有的2行“中心文本”，這個高度恰好等於2 em （至少在我的機器上）。 如果我要改變內容的高度，或者它是動態改變的說3線或1號線，父div的硬編碼的em高度也將不得不改變。
所以，如果有人感興趣，這里是我最終得到的代碼：
<div style="border:1px solid black; padding-left:60px; width:250px; position:relative; word-wrap:break-word;">
TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
<!-- Unfortunately, must set this DIV's height explicitly or the contained DIV's relative positioning won't work, as this DIV is considered to have NO implicit height -->
<div style="position:absolute; display:block; top:50%; left:0px; height:2em;">
<div style="position:relative; top:-50%; background-color:#00aa00; line-height:100%;">
Centred text<br/>
Centred text
</div>
</div>
</div>
解決方案2
2 2011-01-20 10:41:05
使用margin-top:而不是top: like margin-top: -25%;
解決方案3
2 2011-01-20 13:05:52
事情是，內容的垂直處理是出於顯而易見的原因，我相信你已經知道了。 但是你有點試圖解決一個無法解決的問題，這不是一個真正的問題。 （當你知道為什么它們是這樣的時候才有意義）
通過使用絕對位置，您只是從自然流中獲取內容。 使用漂浮物和適當的尺寸或任何需要的東西制作一切都好得多，所以它會很好地降級並且在所有設備上看起來都很好看。 然后在jquery中編寫兩行代碼來檢查高度並對齊所有內容（這也適用於“所有”設備）。 沒有JS的2-3％將需要與無聊的網站一起生活。
解決方案4
0 2011-01-20 14:53:12
我已經開始使用以下代碼獲得某個地方......雖然需要工作。
基於http://www.jakpsatweb.cz/css/css-vertical-center-solution.html上的項目
請注意，您的代碼以怪癖模式運行，我已將其更改為html 5
<!DOCTYPE HTML>
<html>
<head>
<title>Vertical align test</title>
</head>
<style type="text/css">
#outer { overflow: hidden; position: relative; border: 1px solid red; }
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {position: relative; display: table-cell; vertical-align: middle; width: 100%;}
#inner {position: relative; top: -50%; width: 100px} /* for explorer only */
/* optional: #inner[id] {position: static;} */
</style>
<body>
<h1>New test</h1>
<div id="outer">
<div id="middle">
<div id="inner">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</div>
</body>
</html>
解決方案5
-3 2011-01-20 10:30:20
.item {
height: 40px;
top: 50%;
margin-top: -20px;
}
相對或絕對的位置;
CSS垂直對齊，但不完全
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.