負邊距是如何設置頁面中心的元素的？

我碰到以下css snippet。它給出了27px的ID 搜索欄的絕對地位，300px寬度，高度的元素，它從它的正常位置負邊距是如何設置頁面中心的元素的？

#search_bar { 
    position:relative; 
    width: 300px; 
    left:50%; 
    height:27px; 
}

設置了搜索欄50%但我沒有看到搜索欄在中心對齊。這是爲什麼？但是，如果我將該片段更改爲：

#search_bar { 
    position:relative; 
    width: 300px; 
    margin-left:-150px; 
    left:50%; 
    height:27px; 
}

它被對齊到頁面的中心。那個怎麼樣？該物業margin-left:-150px做什麼將其設置爲中心？

來源

2013-02-10 saplingPro

這將是更好的居中像這樣用保證金自動並卸下左側財產http://jsfiddle.net/C3jm4/1/。 Alien先生最好地解釋了你的示例css如何工作。我在這裏展示的方法的優點是寬度可以是動態的和未知的，並且元素仍將居中。 – fredsbend 2013-02-10 09:45:10

這是因爲使用的是絕對所以負邊界是元件的寬度的一半的位置，使得其移動通過後面的它的1/2總寬度的元件

position: absolute; 
left: 50%; /* This shifts the element 50% from left, if you 
      don't want to use negative margins you can use 45%, 40% but you need 
      to fiddle with the measurements first */

enter image description here

因此，計算是這樣

集裝箱總寬度1000px

元素寬300px

左：50%意味着它將從左至右500px開始800px

所以這不集中啊？

所以從500px/* 500這裏-150px留給：50％*/

你得到元素從350px到650px

來源

2013-02-10 06:49:44

left：50％將條的起點放在屏幕的中間位置，而不是居中。但是，如果您知道條的寬度（300px），則將其左移一半，然後條的中間位於屏幕中間。那有意義嗎？ 150是300寬度的一半。如果欄寬爲400，則需要使用-200。

來源

2013-02-10 06:49:36

通過使用相對定位，您允許該塊相對於它的位置移動，如果它是static。 left: 50%將邊緣的左側放置在包含位置的塊的中間位置，這對您而言可能是視口（也就是瀏覽器窗口）。然後margin-left: -150px將從當前位置邊距框中將邊距框的左側移動到左側150px。由於您的總寬度爲300px，因此可以使邊框/內容框相對於包含的定位塊居中。

來源

2013-02-10 06:49:44 Dave

負邊距是如何設置頁面中心的元素的？

回答

相關問題