按钮中心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

按钮中心CSS

回答

相关问题