居中CSS：頁邊空白和右側自動，但有趣的結果

~~您可以在 http://led.dlugosz.com/查看頁面。~~ ^※我想使「畫廊」部分居中可用空間，而不是向左沖洗。居中CSS：頁邊空白和右側自動，但有趣的結果

所以，我添加的規則

margin-left: auto; 
margin-right: auto;

而且似乎工作恰到好處。但是，當我在另一個頁面上做同樣的事情時，它根本不起作用，我找不到任何區別。然後，再玩一遍這個頁面，我發現它在不同的窗口寬度下工作，不起作用，或者做了一些非常奇怪的事情。這裏發生了什麼？更重要的是，我該如何實現這一效果？

※我更新了頁面，並最終刪除它。

來源

2011-04-02 JDługosz

使用此相反，

.wrap {width: 980px; margin: 0 auto;}

其中DIV CLASS = 「包裝」將要居中的。

來源

2011-04-02 00:21:05 PHP

我真的不想針元素的實際寬度，我不明白爲什麼把汽車利潤率在一個單獨的「類」將使任何區別。也許你只是分享你的成語，而不是搞清楚爲什麼我目前使用同樣的技術是在做有趣的事情？ – 2011-04-03 18:52:32

您是否在另一頁上使用了Firebug以確保將margin-left和margin-right屬性分配給該元素？它們可能已被優先級較高的CSS規則覆蓋。

來源

2011-04-02 00:21:32 blackcatweb

是的，我檢查了Firebug的實際佈局。 – 2011-04-03 18:33:57

在#main_col，加margin-right: 20.5em - 這是同一width（18em）爲您的右邊欄，再加上多一點的保證金。
對#main_col h2，刪除margin-right屬性。
在#main_col div > *上，刪除margin-right屬性。
在#galleries ul上，刪除margin-left和margin-right屬性，並添加display: inline-block。
在#galleries上添加text-align: center。
On #main_col h2 and #galleries ul li，add text-align: left。

僅在Firefox中測試。

來源

2011-04-02 00:25:14 thirtydot

將邊距添加到#main_col尤其重要，因爲現在您正在爲所有內容添加右邊距/填充。如果您將邊距和填充添加到容器元素而不是每個內容，則更容易得多。 – Chris 2011-04-02 01:20:32

在#main_col上添加margin-right會給我一個直接的列。一旦清除後，我想讓按鈕在側欄上流動。也許這是什麼混淆了瀏覽器的佈局？你的另一個建議是將內聯內容集中在ul內而不是ul本身，這樣做的確有用。奇數行不同，但沒關係。 – 2011-04-03 18:48:54

你確定你希望圖像按鈕在清除後可以在側欄上流動「 - 當你這樣做時，你的活動網站看起來像這樣：[http://i.imgur.com/EyZfl.jpg] （http://i.imgur.com/EyZfl.jpg）（不是很好） - 但如果你確定這就是你想要的，那麼它很好。如果我解決了你的問題，請[接受我的回答]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work/5235#5235）。謝謝。 – thirtydot 2011-04-03 21:11:11

保證金自動爲我曾在固定寬度的所有情況下以其它方式使用

http://css-tricks.com/centering-in-the-unknown/

來源

2013-02-12 06:39:14

糾正我，如果我錯了，但我相信「保證金左：汽車;」和「margin-right：auto;」值僅適用於塊元素。如果你想中心內聯元素，你應該使用「text-align：center;」。

來源

2017-01-25 11:18:19 JustasM

margin-left :auto and margin-right:auto如果您設置了display: block並且指定了元素的寬度，那麼該元素將與中心對齊，將使元素居中。

否則

margin: 0 auto; 
width: 100px; 
display: block;

來源

2017-11-14 15:00:02 bibek

在之前的答案中，您會看到我不想固定元素的實際寬度。 – 2017-11-14 17:42:40

居中CSS：頁邊空白和右側自動，但有趣的結果

回答

相關問題