ti-enxame.com

CSS do Button Center

Problema de centralização CSS usual, simplesmente não está funcionando para mim, o problema é que eu não sei a largura final px

Eu tenho um div para o nav inteiro e, em seguida, cada botão dentro, eles não centram mais quando há mais de um botão. :(

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>

Qualquer ajuda seria muito apreciada. obrigado


resultado

Se a largura é desconhecida, eu encontrei uma maneira de centralizar os botões, não totalmente feliz, mas não importa, funciona: D

A melhor maneira é colocá-lo em uma mesa

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

Eu percebo que esta é uma pergunta muito antiga, mas eu me deparei com esse problema hoje e consegui que ele funcionasse com

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

Felicidades, Mark

159
markbaldy

Outra boa opção é usar:

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

O problema é com a seguinte linha CSS em .nav_button:

margin: 0 auto;

Isso só funcionaria se você tivesse um botão, é por isso que eles estão descentralizados quando há mais de um nav_button divs.

Se você quiser que todos os seus botões centralizados aninhem o nav_buttons em outro 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>

E estilize assim:

.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;
}
10
Espresso

Considere adicionar isso ao seu CSS para resolver o problema:

button {
    margin: 0 auto;
    display: block;
}
5
Amin

quando tudo mais falhar eu só

<center> content </center>

Eu sei que não é "up to standards" mais, mas se funciona funciona

1
ott