Come centrare il corpo su una pagina?

Sto provando a centrare l'elemento del corpo nella mia pagina HTML.Come centrare il corpo su una pagina?

enter image description here

In sostanza, nel CSS ho impostato l'elemento del corpo per essere display: inline-block; modo che solo larga quanto il suo contenuto. Funziona bene Tuttavia, margin: 0px auto; non lo centra sulla pagina.

Qualcuno sa come risolvere questo problema? Voglio che il grande quadrato blu sia centrato sulla pagina, non fluttuante a sinistra come ora.

Ecco la mia CSS:

body { 
    display: inline-block; 
    margin: 0px auto; 
    text-align: center; 
}

fonte

2012-06-03 Ryan Peschel

Queste scatole non dovrebbero essere all'interno del corpo? – barro32

Vorrei suggerire _non_ per centralizzare 'body', infatti, rendere un' div' centrato – Asif

non si dovrebbe mai centrare il corpo. dai un'occhiata a freecsstemplates.com --- i progettisti usano sempre le div – Yang

applicano anche text-align: center; sull'elemento html in questo modo:

html { 
    text-align: center; 
}

Un approccio migliore se è di avere un contenitore div interno, che saranno centralizzati, e non il corpo.

fonte

2012-06-03 18:16:13

Questo è esattamente ciò che è stato richiesto, perché sta scendendo? http://jsfiddle.net/gA9La/2/ – barro32

Funziona perfettamente. Grazie. –

Ho modificato la mia risposta. Vedi l'approccio migliore. –

È necessario specificare la larghezza del corpo per centrare la pagina.

Or put all the content in the div and center it.

<body> 
    <div> 
    jhfgdfjh 
    </div> 
</body> 

div { 
    margin: 0px auto; 
    width:400px; 
}

fonte

2012-06-03 18:16:48 SRN

Hmm .. Ho pensato che questo potrebbe essere stato il caso ma .. cosa succede se non conosco le dimensioni in anticipo? –

Quindi utilizzare una percentuale –

Ho provato a impostare la larghezza e ad usare una percentuale ma nessuno dei due ha centrato il corpo. –

body 
    { 
     width:80%; 
     margin-left:auto; 
     margin-right:auto; 
    }

Questo funziona sulla maggior parte dei browser, tra cui Internet Explorer.

fonte

2012-09-20 23:38:21 Freakishly

Sì, mi piace. Non volevo che il corpo avesse una larghezza fissa. –

Per coloro che fare conoscere la larghezza, si potrebbe fare qualcosa di simile

div { 
    max-width: ???px; //px,% 
    margin-left:auto; 
    margin-right:auto; 
}

Sono anche d'accordo di non impostare text-align: center sul corpo, perché può rovinare il resto della il tuo codice e potresti dover impostare individualmente il testo allineato: lasciato su un sacco di cose o allora o in futuro.

fonte

2015-05-26 20:04:20 DardanM

Come centrare il corpo su una pagina?

risposta

Problemi correlati