CSS do botão central

86

Problema comum de centralização de CSS, mas não funciona para mim, o problema é que não sei a largura final em px

Eu tenho uma div para todo o navegador e cada botão interno, eles não centralizam 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>

css button center

— Stevanicus
fonte

202

Sei que essa é uma pergunta muito antiga, mas me deparei com esse problema hoje e comecei a trabalhar com ele

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

Saúde, Mark

— Markbaldy
fonte

Observe que um elemento diferente com estilo de flutuação direita / esquerda próximo a esse elemento pode fazer com que pareça fora do centro.

— shlgug

1

Acredito que você esteja certo, mas há uma razão para não apenas fazer

<input class="btn btn-primary" style="text-align:center;display:block;" type="submit" value="{% trans 'ButtonPurpose' %}" />

— RobotHumans

30

Considere adicionar isso ao seu CSS para resolver o problema:

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

— Amin
fonte

4

Melhor resposta. Sem recipientes externos, (provavelmente) sem desvantagens.

— Konrad Gałęzowski

23

Outra boa opção é usar:

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

— Rani
fonte

Funciona (e faz sentido) para a IU de materiais, se o botão for apenas um dentro de um<Grid item>...</Grid>

— Juan Salvador

Ótima ideia :)

— Martin Volek

10

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 descentrados quando há mais de um nav_buttondiv.

Se você quiser que todos os seus botões estejam centralizados nav_buttonsem 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 desta forma:

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

— Expresso
fonte

2

obrigado pelo seu post, infelizmente também não funciona, ainda está tudo à esquerda.

— Stevanicus 01 de

Sim, acabei de perceber isso. É porque o .centerButtons é um elemento de bloco e ocupa todo o espaço em .nav, tornando as propriedades de margem inúteis. Eu tentei consertar flutuando .centerButtons também, mas sem sorte.

— Espresso

sim eu sei que é complicado, me irrita porque eu já fiz isso antes, mas não consigo me lembrar como:) .... alguma idéia?

— Stevanicus

1

Considere adicionar isso ao seu CSS para resolver o problema:

.btn {
  width: 20%;
  margin-left: 40%;
  margin-right: 30%;
}

— Israr Awan
fonte

-1

quando tudo mais falhar, eu apenas

<center> content </center>

Eu sei que não está mais "dentro dos padrões", mas se funciona, funciona

— ott
fonte

12

Esta resposta não adiciona nada às outras respostas. <center>foi descontinuado no HTML4 e nem mesmo é suportado no HTML5, o que significa que provavelmente não funcionará se o HTML5 for usado.

— Magnilex

1

Eu só uso se não conseguir fazer mais nada funcionar. Eu usei em páginas onde existe html5, mas prefiro não. Eu passei e substituí o que pude<div align="center">button</div>

— otto

Tag obsoleta, é uma má prática usá-la

— Sunchock