對齊頁面上的內容

我想將旋轉木馬內容放在頁面的中心，並且還有一個固定的背景，並根據瀏覽器大小調整高度/寬度。對齊頁面上的內容

請讓我知道如何從代碼中完成它。

2012-08-23 Interfaith

爲了居中它刪除left: 50%;在ul css。

對於後臺使用CSS：

body 
{ 
    background-image: url('replaceme'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: 100% 100%; 

}

，並與你想要的圖像替換replaceme。

注：背景CSS有一些CSS3 artibutes，可能無法在舊的互聯網探索者工作，如果你不想使用CSS3考慮使用這個網站：http://www.quackit.com/html/codes/html_stretch_background_image.cfm

來源

2012-08-23 21:34:59

添加

text-align:center;

身體和刪除

left:50%;

從ul，這將以環島的中心爲中心。

至於背景圖像，你可以設置div爲100％寬度，位置絕對，頂部和底部0px，圖像設置爲100％寬度以動態縮放，但是爲了更好的CSS3方法，請查看csstricks。 com，那裏有一個很好的教程。

http://css-tricks.com/perfect-full-page-background-image/

來源

2012-08-23 21:38:01 JohnDevelops

我太慢發佈:( – JohnDevelops

天堂答案正在工作，但只在IE但是不在FF中。任何想法？和你的背景信息幫助。謝謝 – Interfaith

天堂的答案是一箇舊的CSS技術，用於定義寬度的元素居中，它的工作原理，但不是一個理想的方法imo。當你說它在IE中有效時，你指的是什麼版本，你需要支持哪些版本？（IE6或簡稱IE8 +？）。你有沒有嘗試我的答案上面，刪除左：50％，並添加文本對齊：身體的中心？這是一個非常標準的技術，應該跨瀏覽器工作。 – JohnDevelops

由於沒有上述解決方案包括垂直和水平居中，將它添加到您的UL類，如果這是你正在努力實現

ul { 

list-style: none; 
padding: 0; 
margin: -15em 0 0 -31em; 
width: 62em; 
height: 30em; 
background-color: #0C0C0C; 
top: 50%; 
left: 50%; 

}

對於完全可調整大小的背景我是什麼我會繼續使用FrontEndJohn解決方案，只是要記住添加最小寬度和最小高度身體，以便您的圖像不會延伸太多

來源

2012-08-23 21:45:45 Paradise

天堂，你的樣式表完美無缺。但如果你檢查它的Firefox，這是不正確的。 – Interfaith

這應該適用於任何瀏覽器是使用絕對定位的對象進行中心處理的正確方法，請檢查此http：// jsfiddle。net/sT7Gh /在FF，Opera，Safari，Chrome，IE7-9上測試，嘗試添加position：absolute到你的ul類，當編輯你的規則時我可能會刪除這個屬性我只注意到它應該在那裏 – Paradise

對齊頁面上的內容

回答

相關問題