Кнопку в CSS

Question

Кнопку в CSS

обычная проблема центрирования CSS, просто не работает для меня, проблема в том, что я не знаю готовой ширины px

у меня есть div для всего навигатора, а затем каждая кнопка внутри, они больше не центрируются, когда есть более одной кнопки. : (

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>

653 4

css button center

4 ответов:

Comments

Ничего не найдено.

markbaldy · Accepted Answer · 2012-10-15 06:15:55

Я понимаю, что это очень старый вопрос, но я наткнулся на эту проблему сегодня, и я получил его для работы с
<div style="text-align:center;">
    <button>button1</button>
    <button>button2</button>
</div>
Ура, Марк

Rani · Accepted Answer · 2016-08-24 22:16:35

еще один хороший вариант-использовать :
width: 40%;
margin-left: 30%;
margin-right: 30%

Espresso · Accepted Answer · 2010-09-02 02:49:21

проблема заключается в следующей строке CSS на .nav_button:
margin: 0 auto;
это будет работать только если у вас есть одна кнопка, вот почему они смещены от центра, когда есть более одного nav_button ДИВС.

если вы хотите, чтобы все ваши кнопки по центру гнезда nav_buttons в другом div:
<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;
}

ott · Accepted Answer · 2013-05-21 18:22:02

когда все остальное терпит неудачу я просто
<center> content </center>
Я знаю, что его больше не "до стандартов", но если он работает, он работает