2010-02-17 10 views

risposta

55

L'text-align: center; centri unica contenuti in linea dell'elemento, non l'elemento stesso.

Se si tratta di un block element (un div è), è necessario impostare margin: 0 auto;, altrimenti se si tratta di un inline element, è necessario impostare il text-align: center; sul suo elemento genitore invece.

Il margin: 0 auto; imposterà margine superiore e inferiore per 0 e margine sinistra ea destra per auto (della stessa dimensione) in modo che essa si pone al centro automagicamente. Funziona solo se l'elemento del blocco in questione ha un noto width (fisso o relativo), altrimenti non può capire da dove iniziare e finire.

+3

e potresti dover dare anche al "div" una larghezza esplicita. –

+2

Sì, è effettivamente necessario assegnare all'elemento di blocco anche una larghezza esplicita, l'ho modificato. – BalusC

+0

IIRC, alcune versioni precedenti di IE non riconoscono i valori di margine 'auto', ma * serviranno * (erroneamente) per usare il testo -align' per centrare gli elementi del blocco, quindi usa entrambi se puoi. –

1

aggiungere

margin:auto; 
0

Prova ad aggiungere questo allo stile.

margin-left: auto; 
-3

Creare una tabella con un'unica fila e tre colonne, set sinistra e larghezza destra al 100% e voilà, quello centrale viene automaticamente centrato

+1

Questa è una risposta valida. Impraticabile nella maggior parte degli scenari, sì. TUTTAVIA, ancora valido. Si prega di interrompere downvoting una risposta valida solo perché ne hai voglia. –

3

allineamento del testo non deve essere usato per centrare un elemento di blocco . (tranne in IE6, ma questo è un bug)

Devi correggere la larghezza del blocco, quindi utilizzare il margine: 0 auto;

#block 
{ 
    width: 200px; 
    border: 1px solid red; 
    margin: 0 auto; 
} 

e

<div id="#block">Some text... Lorem ipsum</div> 
0

Prova questa:

#bottombox { 
background:transparent url(../images/bg-bottombox.png) no-repeat scroll 0 0; 
float:none; 
height:137px; 
margin:0 auto; 
padding-top:14px; 
width:296px; 
} 

Questo dovrebbe centrare il div nel piè di pagina.

3

Un modo:

<div align="center">you content</div> 

modo migliore:

<div id="myDiv">you content</div> 

CSS per myDiv:

#myDiv{ 
margin:0px auto; 
} 
1

ho utilizzare sempre

<div align="center">Some contents......</div> 
+0

Confermo che questo funziona con Firefox (v54), Chrome (v58) e Safari (v10). –

0

Usa text-align: center per il contenitore, display: inline-block per il div involucro, e display: inline per il div contenuti al contenuto centro in senso orizzontale che ha una larghezza indefinita tutti i browser:

<!doctype html> 
    <html lang="en"> 
    <head> 
     <style type="text/css"> 

    /* Use inline-block for the wrapper */ 
    .wrapper { display: inline-block; } 

    .content { display:inline; } 

    .container { text-align:center; } 

    /*Media query for IE7 and under*/ 

    @media, 
     { 
     .wrapper { display:inline; } 
     } 
     </style> 

     <title>Horizontal Centering Test</title> 
    </head> 

    <body> 

     <div class="container"> 
     <div class="content"> 
      <div class="wrapper"> 
       test text 
      </div> 
     </div> 
     </div> 
    </body> 
    </html> 
1

larghezza fornito è impostato, e si mettere un DOCTYPE corretto,

Prova questa:

Margin-left: auto; 
Margin-right: auto; 

Spero che questo hel ps