絕對格對準中心

我所做的是在主div使用margin:20% ...但我不認爲這是最好的方法：絕對格對準中心

CSS：

.wrapper { 
    background-color:#F0C; 
    float:left; 
    width:1000px; 
    height:400px; 

    margin-left:20%; 
    alignment-adjust:central; 
    position:absolute; 
} 

.maincontent { 
    background-color:#3F6; 
    float:left; 
    width:50%; 
    margin-left:30%; 
} 

.leftSidebar { 
    background-color:#C63; 
    float:left; 
    width:30%; 
    margin-left:-80%; 
} 

.rightsidebar { 
    background-color:#66F; 
    float:left; 
    width:20%; 
}

HTML

<div class="wrapper"> 
    <div class="maincontent"> 
     <!-- main content goes here --> 
    </div> 

    <div class="leftSidebar"> 
     <!-- left sidebar content goes here --> 
    </div> 

    <div class="rightsidebar"> 
     <!-- right sidebar content goes here --> 
    </div> 
</div>

我怎樣才能在.wrapper定位到c輸入？有沒有簡單的方法？

另外，使用left/right屬性和margin-left/margin-right之間的區別是什麼？

來源

2011-12-23 Dmitry Makovetskiyd

是否有原因，爲什麼你使用絕對定位？我從來沒有使用它的佈局目的.. – ptriek 2011-12-23 12:22:35

什麼是絕對位置和固定位置之間的差異，默認位置 – 2011-12-23 12:34:34

默認是「靜態」，這意味着它的行爲像一個正常的塊或內聯元素。 'fixed'意味着它被從佈局流程中取出，並且即使頁面滾動，它也將保持在瀏覽器窗口中的完全相同位置。「絕對」意味着它被從佈局流程中取出，並放在不同的圖層上 - 因此它可以左/右/上/下自由定位，因此它可以堆疊在其他元素的頂部。 – ptriek 2011-12-23 12:43:03

.wrapper { 
    width:1000px; 
    position:absolute; 
    left:50%; 
    margin-left:-500px; 
}

來源

2011-12-23 12:24:54 Purag

hmm ..我會嘗試用百分比來代替它。爲什麼我需要剩下50％？！？ – 2011-12-23 12:28:05

您從頁面左側將它放在50％處，然後將其移回寬度的一半。這是一種常用的方法。 – Purag 2011-12-23 12:28:49

它工作的時間 – 2011-12-23 12:34:09

我的答案是：跳過絕對定位，並使用margin:0 auto;到中心內容（在頂部和底部沒有保證金，並留下自動緣和右）。

.wrapper 
{ 
    background-color:#F0C; 
    width:1000px; 
    height:400px; 
    margin:0 auto; 
}

來源

2011-12-23 12:45:11 ptriek

哇..如果邊距是自動..然後div被設置爲中心..但是如果我想要使用頂部和底部的元素..讓div向下/向上？！？ – 2011-12-23 12:55:13

我不完全明白，你能解釋清楚一點嗎？ – ptriek 2011-12-23 12:59:13

你如何定位它沒有絕對位置？ – 2011-12-23 13:04:16

絕對格對準中心

回答

相關問題