與CSS垂直對齊

是的，是的，我知道這是關於CSS垂直對齊的另一個問題，並且已經完成了一百萬次。請放心，我已經多次遇到這個問題，並且我已經完成了有關使用CSS垂直居中的各種方法的閱讀。我在這裏問的是因爲這些方法都沒有做我想做的事情，我只是想確保我的懷疑（即CSS垂直對齊被破壞，並且不會做我想做的事）絕對是正確的。與CSS垂直對齊

首先登場的，這是我的測試用例：http://www.game-point.net/misc/testAlign/

這裏的標準：

我要對齊的「居中文本」垂直，相對於含「TestTestTest的DIV ... '文本。
我不想指定任何高度。
我希望'TestTestTest'和'居中文本'DIV根據文本數量和寬度限制動態獲取它們的高度。
我不想使用Javascript。

即使在CSS3中，這似乎也是不可能的，更不用說CSS2了。令人討厭的是我幾乎在那裏; position:absolute; top:-50%; DIV用於將該DIV的頂部設置爲容器DIV的一半。問題在於內部DIV的風格position:relative; top:-50%;沒有做任何事情來將內容向上移動一半的高度，以完全居中，因爲CSS表示絕對定位的DIV沒有高度，因此top:-50%是沒有意義的。據我所知，這只是CSS中的一個基本缺陷，沒有特別的理由。一個絕對定位的元素確實有一個高度，我不知道爲什麼CSS假裝它沒有。我只是想問一下，如果有人對我如何能夠達到預期的效果有任何想法，請參閱上文所述的標準。具有諷刺意味的是，IE6/7/8的「破碎」盒子模型在怪癖模式下給了我很大的影響。恥辱，他們正在'修復'它在IE9，所以它不會了。

來源

2011-01-20 Jez

好了，你可以隨時使用jQuery做的魔力。但據我所知，你的懷疑可能是正確的。 – 2011-01-20 11:27:31

認爲你現在可以用flexbox做到這一點http://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Ruskin 2015-01-12 14:21:09

OK，我的懷疑的確是正確的，這是不可能的（我認爲這是CSS中的一個缺陷，他們應該提供一種在DIV中垂直對齊的方式，而不指定內部元素高度）。

我最後得到的最壞的解決方案是這樣的：指定「中間」DIV的高度 - 即使用position:absolute顯示幷包含真實內容的DIV。我已將它添加到測試案例頁面http://www.game-point.net/misc/testAlign/，標題爲使用行高度：100％，硬編碼「中」DIV高度。這個解決方案意味着你必須事先知道內容的高度是垂直居中的，這很吸引人，因爲瀏覽器計算這個值，你不需要指定它，但它是唯一的方法（直到CSS一起行動）。我使用em s來指定高度，以便放大和縮小文本不會破壞垂直居中。結果發現，對於我的兩行'居中文本'，這個高度恰好等於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>

來源

2011-02-01 10:29:58 Jez

-3

.item { 
    height: 40px; 
    top: 50%; 
    margin-top: -20px; 
}

位置相對或絕對;

來源

2011-01-20 10:30:20 jcubic

OP：「我不想指定任何高度。」 – kapa 2011-01-20 10:31:26

「top：50％」的解決方案只能在指定的高度下工作。 – jcubic 2011-01-24 01:07:49

還有其他解決方案使用邊距設置爲自動，但我認爲它也需要指定的高度。 – jcubic 2011-01-24 02:23:07

使用margin-top:，而不是像top:margin-top: -25%;

來源

2011-01-20 10:41:05 ilyast

的事情是，雖然內容是垂直的處理是由這樣的原因很明顯，這一點我敢肯定，你已經知道的。但是你有點想解決一個無法解決的問題，那不是一個真正的問題。（當你知道爲什麼事情是這樣的時候有意義）

通過使用絕對位置，你只是將內容從自然流程中提取出來。把所有東西都製作成漂浮物和適當的尺寸或者需要的任何東西都好得多，所以它可以很好地降解，並且在所有設備中看起來都不錯。然後在jquery中寫兩行代碼來檢查高度並對齊所有內容（這也適用於「所有」設備）。沒有JS的2-3％將需要忍受無聊的網站。

來源

2011-01-20 13:05:52 plebksig

我已經開始使用下面的代碼得到某處......但需要工作。

基於對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>

來源

2011-01-20 14:53:12 Ruskin

與CSS垂直對齊

回答

相關問題