按鈕中心CSS

平時CSS定心問題，只是不工作對我來說，問題是我不知道的成品幅寬PX按鈕中心CSS

我對整個資產淨值股利，然後每個按鈕裏面，他們不當有多個按鈕時，不再需要中心。 :(

CSS

.nav{ 
    margin-top:167px; 
    width:1024px; 
    height:34px; 
} 

.nav_button{ 
    height:34px; 
    margin:0 auto; 
    margin-right:10px; 
    float:left; 
}

HTML

<div class="nav"> 
     <div class="nav_button"> 
      <div class="b_left"></div> 
      <div class="b_middle">Home</div> 
      <div class="b_right"></div> 

     </div> 
     <div class="nav_button"> 
      <div class="b_left"></div> 
      <div class="b_middle">Contact Us</div> 
      <div class="b_right"></div> 

     </div> 
</div>

任何幫助將不勝感激。謝謝

結果

如果寬度是未知的，我沒有找到一個辦法中心的按鈕，而不是完全滿意，但並不重要，它的工作原理：d

最好的辦法是把它放在一個表

<table class="nav" align="center"> 
    <tr> 
     <td> 
     <div class="nav_button"> 
      <div class="b_left"></div> 
      <div class="b_middle">Home</div> 
      <div class="b_right"></div> 
     </div> 

     <div class="nav_button"> 
      <div class="b_left"></div> 
      <div class="b_middle">Contact Us</div> 
      <div class="b_right"></div> 
     </div> 
     </td> 
    </tr> 
    </table>

來源

2010-09-01 Stevanicus

113

我意識到這是一個非常古老的問題，但我偶然發現今天橫跨這個問題，我得到它與

<div style="text-align:center;"> 
    <button>button1</button> 
    <button>button2</button> 
</div>

乾杯，馬克

來源

2012-10-15 03:15:55 markbaldy

像魅力一樣工作。榮譽@markbaldy – andy4thehuynh 2013-11-11 20:20:36

的問題是與.nav_button以下CSS行：

margin: 0 auto;

，如果你有一個按鈕，這隻會工作，這就是爲什麼他們是偏離中心時，有不止一個nav_button的div。

如果你想在另一個DIV中心窩nav_buttons所有的按鈕：

<div class="nav"> 
    <div class="centerButtons"> 
     <div class="nav_button"> 
      <div class="b_left"></div> 
      <div class="b_middle">Home</div> 
      <div class="b_right"></div> 
     </div> 
     <div class="nav_button"> 
      <div class="b_left"></div> 
      <div class="b_middle">Contact Us</div> 
      <div class="b_right"></div> 
     </div> 
    </div> 
</div>

和風格是這樣：

.nav{ 
    margin-top:167px; 
    width:1024px; 
    height:34px; 
} 

/* Centers the div that nests the nav_buttons */ 
.centerButtons { 
    margin: 0 auto; 
    float: left; 
} 

.nav_button{ 
    height:34px; 
    margin-right:10px; 
    float: left; 
}

來源

2010-09-01 23:21:58 Espresso

感謝您的文章，不幸的是也不工作，仍然在左邊。 – Stevanicus 2010-09-01 23:39:25

是的，我剛剛意識到這一點。這是因爲.centerButtons是一個塊元素，它佔用了.nav中的整個空間，使得margin屬性無用。我試圖通過漂浮.centerButtons來修復它，但是沒有運氣。 – Espresso 2010-09-01 23:48:39

是啊，我知道它的棘手的一個，惹我因爲我做過之前，但不記得如何：）....任何想法？ – Stevanicus 2010-09-02 00:02:21

當一切都失敗我只是

<center> content </center>

我知道它不是「達標」了，而是它是否工作它的工作原理

來源

2013-05-21 15:22:02 ott

此答案不會爲其他答案添加任何內容。 '

'在HTML4中被棄用，甚至在HTML5中都不支持，這意味着如果使用HTML5，它可能不會工作。 – Magnilex 2013-08-07 11:36:49

我只有在我無法得到其他工作時才使用它。我已經在有html5但不願意的頁面中使用它。我已經通過'

button

'替換了我所能做的 – ott 2013-10-29 18:15:18

另一個不錯的選擇是使用：

width: 40%; 
margin-left: 30%; 
margin-right: 30%

來源

2016-08-24 08:05:09 Rani

回答

相關問題