cercando di allineare il pulsante html al centro della mia pagina

Question

Sto cercando di allineare un pulsante HTML esattamente al centro della pagina indipendentemente dal browser utilizzato. Può essere flottante a sinistra mentre è ancora al centro verticale o essere da qualche parte nella pagina come nella parte superiore della pagina, ecc. Voglio che sia centrato sia verticalmente che orizzontalmente. Ecco quello che ho scritto in questo momento:

<button type="button" 
style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> 
mybuttonname</button> 

Answer 1

, ecco la soluzione: http://jsfiddle.net/7Laf8/

Fondamentalmente, posizionare il pulsante in un div con testo centrato:

<div class="wrapper"> 
    <button class="button">Button</button> 
</div> 

Con i seguenti stili:

.wrapper { 
    text-align: center; 
} 

.button { 
    position: absolute; 
    top: 50%; 
} 

Ci sono molti modi per pelle un gatto, e questo è solo su e.

Answer 2

posto è all'interno di un altro div, usare i CSS per spostare il pulsante al centro:

<div style="width:100%;height:100%;position:absolute;vertical-align:middle;text-align:center;"> 
    <button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> 
mybuttonname</button> 
</div>​ 

Ecco un esempio: http://jsfiddle.net/U2B3x/

Answer 3

provare questo è abbastanza semplice e dare non puoi apportare modifiche alle il file css questo dovrebbe funzionare

<p align="center"> 
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> mybuttonname</button> 
</p> 

Answer 4

ho davvero preso di recente per display: table di dare alle cose una dimensione fissa tale da consentire margin: 0 auto al lavoro. Ha reso la mia vita molto più facile. Hai solo bisogno di superare il fatto che la visualizzazione 'table' non significa table html.

È particolarmente utile per la progettazione reattiva in cui le cose diventano pazzesche e impazzite il 50% ha lasciato questo e -50% che diventa semplicemente ingestibile.

style 
{ 
    display: table; 
    margin: 0 auto 
} 

http://jsfiddle.net/Z52eR/

Inoltre, se hai due pulsanti e se si vuole la stessa larghezza che non hanno nemmeno bisogno di conoscere le dimensioni di ciascuno per ottenere loro di essere la stessa larghezza - perché il tavolo le ridurrà magicamente per te.

http://jsfiddle.net/AK674/2/

(questo funziona anche se sono in linea e si desidera centrare due pulsanti lato all'altro - Provate a farlo con percentuali!).

Answer 5

È possibile centrare un pulsante senza utilizzare text-align sul genitore div per semplice utilizzando margin:auto; display:block;

Ad esempio:

HTML

<div> 
    <button>Submit</button> 
</div> 

CSS

button{ 
    margin:auto; 
    display:block; 
} 

vederlo in azione:http://codepen.io/maudulus/pen/avBdpL

Answer 6

Ecco la soluzione come chiesto

<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>

Answer 7

Per me ha funzionato con FlexBox.

aggiungere una classe CSS intorno al div/elemento genitore con:

.parent { 
    display: flex; 
} 

e per l'uso tasto:

.button { 
    justify-content: center; 
} 

è necessario utilizzare un div genitore, altrimenti il ​​pulsante non lo fa ' sapere 'qual è il centro della pagina/elemento.