Button Center CSS


86

Solito problema di centratura CSS, semplicemente non funziona per me, il problema è che non conosco la larghezza finale px

Ho un div per l'intero nav e poi ogni pulsante all'interno, non si centrano più quando c'è più di un pulsante. :(

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>

Qualsiasi aiuto sarebbe molto apprezzato. Grazie


Risultato

Se la larghezza è sconosciuta, ho trovato un modo per centrare i pulsanti, non del tutto felice ma non importa, funziona: D

Il modo migliore è metterlo in una tabella

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

Risposte:


202

Mi rendo conto che questa è una domanda molto vecchia, ma oggi mi sono imbattuto in questo problema e l'ho trovato su cui lavorare

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

Salute, Mark


Nota che un elemento diverso che ha uno stile di float destro / sinistro vicino a questo elemento potrebbe farlo apparire fuori centro.
shlgug

1
Spero che tu abbia ragione, ma c'è una ragione per non farlo<input class="btn btn-primary" style="text-align:center;display:block;" type="submit" value="{% trans 'ButtonPurpose' %}" />
RobotHumans

30

Considera l'idea di aggiungerlo al tuo CSS per risolvere il problema:

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

4
Migliore risposta. Nessun contenitore esterno, (probabilmente) nessun inconveniente.
Konrad Gałęzowski

23

Un'altra bella opzione è usare:

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

Funziona (e ha senso) per l'interfaccia utente materiale, se il pulsante è solo uno all'interno di un<Grid item>...</Grid>
Juan Salvador,

Oh bella idea :)
Martin Volek

10

Il problema è con la seguente riga CSS su .nav_button:

margin: 0 auto;

Funzionerebbe solo se avessi un pulsante, ecco perché sono decentrati quando ci sono più nav_buttondiv.

Se vuoi che tutti i tuoi pulsanti siano centrati, annidali nav_buttonsin un altro 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 modellalo in questo modo:

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

2
grazie per il tuo post, purtroppo non funziona neanche, ancora tutto a sinistra.
Stevanicus

Sì, l'ho appena capito. È perché .centerButtons è un elemento block e occupa l'intero spazio in .nav, rendendo inutili le proprietà del margine. Ho provato a risolverlo facendo fluttuare anche .centerButtons, ma senza fortuna.
Espresso

sì, lo so che è complicato, mi dà fastidio perché l'ho già fatto ma non ricordo come:) .... qualche idea?
Stevanicus

1

Considera l'idea di aggiungerlo al tuo CSS per risolvere il problema:

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

-1

quando tutto il resto fallisce io

<center> content </center>

So che non è più "all'altezza degli standard", ma se funziona funziona


12
Questa risposta non aggiunge nulla alle altre risposte. <center>è stato deprecato in HTML4 e non è nemmeno supportato in HTML5, il che significa che probabilmente non funzionerà se viene utilizzato HTML5.
Magnilex

1
Lo uso solo se non riesco a far funzionare nient'altro. L'ho usato nelle pagine in cui è presente html5 ma preferisco non farlo. Ho passato e sostituito quello che potevo con<div align="center">button</div>
ott

Tag obsoleto, è una cattiva pratica usarlo
Sunchock
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.