垂直對齊

請看看這個：http://sources.freehosting.bg/landing.html 垂直對齊

我嘗試垂直對齊＃內容，所以它看起來在大（1920×1200）和小（1024×768）分辨率良好。我的意思是它沒有滾動條。正如你所看到的，有很多可用空間，所以不需要滾動條。

我想出的唯一解決方案是用JS計算#content的高度並設置填充，但我意識到這是最可能的解決方案。

請告訴我如何做到這一點。

2012-08-01 barakuda28

如果你的內容高度是固定放在一個div內容

<div id="distance"></div> 
<div id="content"> 
    Vertically centered :D 
</div>

和風格才喜歡：

html, body { 
height:100%; 
margin:0; 
padding:0; 
} 

div#distance { 
width:1px; 
height:50%; 
margin-bottom:-300px; /* half of website height */ 
float:left; 
} 

div#content { 
text-align:left; 
margin:auto; 
position: relative; 
width: 950px; 
height: 600px; 
clear: left; 
}

來源

2012-08-01 12:52:42 Gijs

http://jsfiddle.net/9Q36u/ – Gijs 2012-08-01 12:54:54

爲了這個工作，我仍然需要用JS計算深灰色空間的高度，並將#content設置爲該高度。然後，我必須將#content內部元素包裝在某個div中，並將您的技術應用於該div。它再次使用JS :) – barakuda28 2012-08-01 13:08:53

不是。你可以只有灰色的背景，並把所有這些都包含在100％高度的div中。在說div之後，你放下頁腳，並給它一個負的頂部邊緣，以將它移回到視圖中。所有你必須知道的是你的頁腳有多高，你的主要內容有多高（例如，手寫的東西+水平線之間的東西）。 – 2012-08-01 13:27:14

看看this fiddle是你在找什麼對於。 IMO簡單解決方案。

它通過迫使包含div表現爲table-cell，並使用vertical-align: middle樣式來工作。它不需要你知道任何元素的高度。

小提琴中使用的代碼如下。

HTML：

<div class="a"> 
    text inside div a 
    <div class="b"> 
     text inside div b 
    </div> 
</div>

重要的風格是：

display: table-cell 
vertical-align: middle

其餘的都是隻有在那裏做示範。 CSS：

div.a { 
    border: 1px solid red; 
} 
div.b { 
    border: 1px solid blue; 
    height: 200px; 
    display:table-cell; 
    vertical-align:middle; 
}

來源

2012-08-01 13:23:00 Arj

我知道的，使用純CSS作品的唯一辦法，沒有JS也沒有黑客需要你知道你想要的位置的事情高度：

<html> 
    <head> 
    <style type="text/css"> 
     /* Give your document height */ 
     body, #content { 
     height: 100%; 
     } 

     /* Give your element height */ 
     .thing { 
     width: 20px; 
     height: 300px; 
     background: #000; 
     } 
     /* Position thing */ 
     #content .thing { 
     position: absolute; 
     top: 50%; 
     margin-top: -150px; /* half the height of the thing */ 
     } 
    </style> 
    </head> 
    <body> 
    <div id="content"> 
     <div class="thing"></div> 
    </div> 
    </body> 
</html>

編輯：更新了物品，容器ID的高度。仍然工作得很好。

來源

2012-08-01 13:46:18

我試圖定位的東西的高度是300px，但是爲了工作，我需要擴展容器（不是「body」，而是#content）的高度。在我看來，JS必須要完成。 – barakuda28 2012-08-01 13:52:53

您的意見並不重要。我的意見不重要。重要的是「代碼工作嗎？」複製代碼，將其輸入到任何編輯器中，並查看它是否可以用你自己的眼睛。 – 2012-08-01 13:59:29

我知道它的作品，但那不是我的情況。在我的情況下，＃內容不會擴展到整個灰色區域，這是問題所在。 – barakuda28 2012-08-01 14:14:28

有沒有一種方法可以做到這一點沒有JavaScript和不知道內容的高度 - 但純粹主義者不會喜歡它。再次，有時它不是由時尚人士批准並不重要。有時你需要的只是完成工作，因爲你的老闆是這樣想的。

而解決方法是：使用表（告訴你純粹主義者不會喜歡它）。做佈局老派的方式，並濫用HTML指定很多表格功能的事實。

表格單元格是唯一具有垂直對齊屬性的HTML元素，它可以完成大多數人期望的操作。只需給出表格100％的寬度和高度（以便隨着窗口大小展開）並使用單元格對齊來定位所需的內容。

我只使用過這個技巧一次，它仍然讓我覺得髒*但是當你真的需要它時它比其他任何東西都更好。

* 注意：我自己是純粹主義者，但明白有時一個男人必須做一個男人必須做的事情。

來源

2012-08-02 08:11:37 slebetman

回答

相關問題