試圖居中頂部DIV酒吧

我有div欄設置爲不滾動，所以它會始終顯示在網站的頂部。在這個酒吧裏面我有另外一個div box，裏面有兩個按鈕，它們都是右邊的，所以它們總是在右上角。試圖居中頂部DIV酒吧

問題是我想要按鈕居中右上方不是頁面右上角。相反，如果主體元素居中，則按鈕將位於居中元素的右上角。

這裏是代碼：

<DIV class="fixedtop"> 
     <div class="language2"> 
      <div class="english"> <font id="buttontxt">ENGLISH</font></div> 

      <div class="spanish"> <font id="buttontxt">SPANISH</font></div> 

     </div> 
    </DIV>

這裏是最上面一欄的CSS：

.fixedtop 
{ 
    position: fixed; 
    margin-left: 0 auto; 
    margin-right: 0 auto; 
    top: 0px; 
    width:600px; 
    height: 30px; 
} 



.language2 
{ 
    margin-left: auto; 
    margin-right: auto; 
    top: 0px; 
    width: 600px; 
    height: 30px; 
    margin-right: 0px; 
} 

.spanish 
{ 
    background-color:00ADEF; 
    float: right; 
    margin-right: 4px; 
    padding-top: 10px; 
    display: inline-block; 
    width: 100px; 
    height:30px; 
    color:black; 
    text-align: center; 
    vertical-align: middle; 
    -webkit-border-bottom-right-radius: 10px; 
    -webkit-border-bottom-left-radius: 10px; 
    -moz-border-radius-bottomright: 10px; 
    -moz-border-radius-bottomleft: 10px; 
    border-bottom-right-radius: 10px; 
    border-bottom-left-radius: 10px; 
    -webkit-box-shadow: 2px 3px 2px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 2px 3px 2px rgba(50, 50, 50, 0.75); 
    box-shadow:   2px 3px 2px rgba(50, 50, 50, 0.75); 
} 

.english 
{ 
    background-color:00ADEF; 
    float: right; 
    margin-right: 15px; 
    display: inline-block; 
    padding-top: 10px; 
    width: 100px; 
    height:30px; 
    color:black; 
    text-align: center; 
    vertical-align: middle; 
    -webkit-border-bottom-right-radius: 10px; 
    -webkit-border-bottom-left-radius: 10px; 
    -moz-border-radius-bottomright: 10px; 
    -moz-border-radius-bottomleft: 10px; 
    border-bottom-right-radius: 10px; 
    border-bottom-left-radius: 10px; 
    -webkit-box-shadow: 2px 3px 2px rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 2px 3px 2px rgba(50, 50, 50, 0.75); 
    box-shadow:   2px 3px 2px rgba(50, 50, 50, 0.75); 


}

來源

2012-10-14 user1744733

margin-left和margin-right只接受1個參數，而不是兩個因爲你試圖傳遞不幸的是，你不能使用margin: 0 auto來將一個固定的元素居中放置在CSS中。

因此，你必須設置left位置到50％，然後設置左旁是元素的寬度的負半：

.fixedtop 
{ 
    position: fixed; 
    top: 0; 
    left: 50% 
    width: 600px; 
    height: 30px; 
    margin-left: -300px; 
}

來源

2012-10-14 10:57:34 BenM

？我剛把它放在那裏看。有沒有辦法做到這一點沒有固定的寬度？ – user1744733

不，不幸的是，沒有簡單的方法只使用CSS來設置沒有明確寬度的'div'元素。不過，您可以簡單地使用jQuery來製作解決方案。 – BenM

你需要的是以下幾點：

  .fixedtop 
     { 
      position: fixed; 
      top: 0px; 
      left: 50%; 
      margin: 0 0 0 -300px; 
      width:600px; 
      height: 30px; 
      background: #060; 
     } 



     .language2 
     { 
      margin: 0 auto; 
      background: #0F9; 
     }

基本上保證金：自動不工作的位置：固定或絕對。所以我們所做的是將其從左側定位50％。而且由於我們知道.fixedtop寬度爲600px，因此我們會給它一個-300px的左邊距，以將其重新居中在頁面上。因爲.language2是一個塊元素（div），所以你不需要給它一個寬度和高度。技術上的利潤率：auto也會變得過時。我一分鐘都給出了兩種背景顏色，這樣你就可以更好地看到他們的行爲。你可以稍後刪除它們。希望這可以幫助。

來源

2012-10-14 10:57:39 deborre

你所以只要我有一個固定的寬度它應該工作設置此樣式父fixedtop

parentfixedtop{ 
position:relative; 
}

來源

2012-10-14 11:02:56

試圖居中頂部DIV酒吧

回答

相關問題