以HTML/CSS爲中心的東西

我想我可能會遇到問題，不確定它是否是問題，因爲我一直在尋找它，所以我甚至不知道它是否居中。以HTML/CSS爲中心的東西

http://jamessuske.com/thornwood/gallery.php

我所試圖做的是中心的整個畫廊，對我來說，它看起來像它有點向右。如果任何人都可以幫我弄清楚，那會很好。先謝謝了。

CSS代碼

.contentTextGallery{ 
padding:20px 0 0 0; 
width:866px; 
font-size:16px; 
float:left; 
} 

.gallery{ 
width:912px; 
margin-top:6px; 
} 

.gallery ul{ 
list-style-type:none; 
text-align:center; 
} 

.gallery li{ 
display: inline-block; 
} 

* html .gallery li { /* IE6 */ 
    display: inline; 
} 

*:first-child + html .gallery li { /* IE7 */ 
    display: inline; 
} 

.gallery ul a { 
display:block; 
text-decoration: none; 
color:#FFF; 
padding:5px 0 0 5px; 
}

來源

2011-10-27 user979331

都能跟得上:)它的中心 –

什麼瀏覽器給你帶來問題？鉻合金看起來很好 –

哎呀 - 不明白你在說什麼。我認爲你的意思是中間是一個大盒子，而不是那個盒子裏面的圖像_gallery。 @fixlr是正確的 - 你需要刪除列表中的填充。你應該澄清。 – Nightfirecat

更新：哦，我知道你想立即解決，容器內的東西是什麼：

所有你需要的是

.gallery ul { 
    padding: 0; 
}

原創：

你可能想要做的一件事是拿起一個工具，如XScope：http://iconfactory.com/software/xscope。這是一個具有設計工具的應用程序（標尺，指南，瀏覽器大小框架等）。統治者可以幫助你，因爲它可以測量屏幕上的像素。您可以快速測量佈局每側的像素數量。

而且，這裏是類似的東西，但有點不太優雅：http://www.arulerforwindows.com/

來源

2011-10-27 20:27:26 nheinrich

** [不是]（http://imgur.com/o40vd）**。不過，好的更新。 – Bojangles

剛纔意識到他在談論網站內容而不是網站本身。更新了一個簡單的解決方案來修復該錯誤。 – nheinrich

因此，我的評論中的第二句話。我已經採取了截圖，所以我決定發佈它:-P – Bojangles

它看起來像你只需要刪除左填充的元素在你的名爲.gallery：

.gallery ul { padding-left: 0px; }

根據什麼網站您正在使用的瀏覽器，列表上通常會有一個默認填充。

來源

2011-10-27 20:31:28 fixlr

它不居中。（現在有三個人聲稱它是居中，但我不知道他們在看什麼...）

您正在使用圖像列表，並且默認情況下在左側具有填充。

在鏈接中使用填充來獲得它們之間的空間，但是隻填充左側和頂側，以便在左側添加額外的空間。

在列表中設置左填充零：

.gallery ul{ 
    list-style-type:none; 
    text-align:center; 
    padding-left: 0; 
}

使左，右填充中的鏈接更均勻：

.gallery ul a { 
    display:block; 
    text-decoration: none; 
    color:#FFF; 
    padding:5px 2px 0 3px; 
}

來源

2011-10-27 20:33:20 Guffa

非常感謝。看起來完美！ – user979331

你是對的它不居中。

我想，但我不確定，它可能是一個填充問題，您將填充左側設置爲左側，但在容器中的幾個元素上設置的位置不同。

所有左填充爲0px（或使用左平等的填充和右這樣 - 填充：5px的5px的; 或每個圖像可以有0邊距和等於保證金：5px的5px的;

來源

2011-10-27 20:42:08

以HTML/CSS爲中心的東西

回答

相關問題