按钮中心 CSS [英] Button Center CSS

问题描述

通常的 CSS 居中问题，对我不起作用，问题是我不知道完成的宽度 px

我有一个用于整个导航的 div，然后是里面的每个按钮，当有多个按钮时，它们不再居中.:(

CSS

.nav{边距顶部:167px;宽度:1024px；高度:34px；}.nav_button{高度:34px；保证金:0 自动；边距右:10px;向左飘浮;}

HTML

<div class="nav_button"><div class="b_left"></div><div class="b_middle">首页</div><div class="b_right"></div>
<div class="nav_button"><div class="b_left"></div><div class="b_middle">联系我们</div><div class="b_right"></div>

任何帮助将不胜感激.谢谢

---

结果

如果宽度未知，我确实找到了一种将按钮居中的方法，虽然不是很高兴但没关系，它可以工作:D

最好的方法是放在一个表中

<tr><td><div class="nav_button"><div class="b_left"></div><div class="b_middle">首页</div><div class="b_right"></div>
<div class="nav_button"><div class="b_left"></div><div class="b_middle">联系我们</div><div class="b_right"></div>
</td></tr>

解决方案

我意识到这是一个非常古老的问题，但我今天偶然发现了这个问题，并得到了解决

<button>button1</button><button>button2</button>

干杯，标记

Usual CSS centering issue, just not working for me, the problem is that I don't know the finished width px

I have a div for the entire nav and then each button inside, they dont center anymore when there is more than one button. :(

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>

Any help would be greatly appreciated. Thanks

---

Result

If the width is unknown, I did find a way a center the buttons, not entirely happy but doesnt matter, it works :D

The best way is to put it in a table

<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>

解决方案

I realize this is a very old question, but I stumbled across this problem today and I got it to work with

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

Cheers, Mark

这篇关于按钮中心 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！