水平居中

我的網站的標題和導航欄有絕對的位置，所以他們將保持在圖片滾動下。水平居中

http://www.mikegarten.com/

我想水平居中整個網站。我試過this method，但沒有成功。

我試圖把我的圖片放到一個表格中，然後將其集中在一個div中，但是然後水平圖像在同一行中的垂直照片的網格上下創建了空白空間。

是否有可能「包裝」這個網站，還是我需要使用另一種方法？

來源

2013-12-10 user3088132

只是一個建議。將所有東西都定位絕對是不好的做法。 – screenmutt

^同意。好的做法是將任何'絕對'項目嵌套在'親戚'容器中。 –

您可以將左側的css屬性設置爲50％，然後爲元素的寬度的一半* -1添加左側的餘裕，以便將名稱元素居中，左側屬性設置爲50％，左側餘量到-132px;

#name { 
    position: fixed; 
    top: 20px; 
    z-index: 3; 
    left: 50%; 
    margin-left: -132px; 
} 

#navtext { 
    position: fixed; 
    top: 105px; 
    background-color: none; 
    width: 1000px; 
    left: 50%; 
    z-index: 3; 
    margin-left: -500px; 
}

爲您3列，你需要將它們放在一個包裝的div和在其上設置寬度爲所需寬度和利潤率左緣和右爲自動。

來源

2013-12-10 18:59:13 box86rowh

在html中有<center></center>標籤，但我認爲這已經過時。另一種方法是使用CSS給它一個寬度和邊距：auto;

來源

2013-12-10 18:59:34 AnwarElWakil

只是爲了確認'中心'標籤已棄用，不應使用 – Don

您已完成您網站上的所有網格元素position:absolute。這就是爲什麼它不會集中，因爲你已經告訴它在一個確切的位置。另外，如果你將網格封裝在一個包裝div中，這樣可以幫助你將它們定位爲一個整體。

使用寬度和邊距。然後可以使用填充來分隔剩餘的網格元素。

來源

2013-12-10 19:05:07

至少有三種不被棄用的方式來水平居中。

margin: auto（explained at LearnLayout.com）
ugly hacking of position與包裝元素（問題鏈接到）
甚至醜陋黑客的position，這個時間設定position: absolute; left: 50%; margin-left: -<half the width of this box>

我建議使用第一種方法。您必須確保您要居中的元素有display: block,float: none和position設置爲normal或relative。它也必須有有限的寬度（小於其父母的100％），這是顯而易見的。

來源

2013-12-10 19:46:16 Palec

回答

相關問題