Come fare un Allinea al centro div in HTML

Eventuali duplicati:
How to center a div in a div?Come fare un Allinea al centro div in HTML

Un modo semplice per rendere un oggetto centrato in HTML sta utilizzando align='center', ma non funziona per un div.

ho provato:

style='text-align:center'; 
style='left:50%';

ho anche vero centro di un tag

<center>

Ma non posso fare il mio obiettivo div per essere il centro.

fonte

2010-04-22 Mac Taylor

Stai provando a centrare il div stesso o il testo all'interno del div? – Welbog

ho detto nella mia domanda un div non il suo testo. grazie –

Impostare una larghezza per 'div', quindi usare' margine: 0 auto; ': http://jsfiddle.net/spikey/FLL5Z/ – uSeRnAmEhAhAhAhAhA

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Center</title> 
 
    </head> 
 
    <body> 
 

 
    <div style="text-align: center;"> 
 
     <div style="width: 500px; margin: 0 auto; background: #000; color: #fff;">This DIV is centered</div> 
 
    </div> 
 

 
    </body> 
 
</html>

provato ed ha funzionato in IE, Firefox, Chrome, Safari e Opera. Non ho testato IE6. L'allineamento del testo esterno è necessario per IE. Altri browser (e IE9?) Funzioneranno quando fornirai il valore DIV margin (sinistro e destro) di auto. Margine "0 auto" è una scorciatoia per margine "0 auto 0 auto" (in alto a destra in basso a sinistra).

Nota: il testo è anche centrato all'interno del DIV interno, se si desidera che rimanga sul lato sinistro, basta specificare l'allineamento del testo: a sinistra; per il DIV interno.

Modifica: IE 6, 7, 8 e 9 in esecuzione nella modalità Standard funzioneranno con i margini impostati su automatico.

fonte

2010-04-22 13:28:01 Tower

ho bisogno di impostare con della mia div div non fissata pixel, penso che se impostassi la larghezza al 95%, non sarebbe il centro –

come fai a sapere che il suo div è in posizione relativa o statica? – meo

@Mac: questa tecnica funziona perfettamente per una larghezza percentuale. Tuttavia, in generale, affinché il margine automatico funzioni, devi essere in modalità Standard, per la quale ti servirà una dichiarazione " bobince

-1

come su qualcosa in questo senso

<style type="text/css"> 
    #container { 
    margin: 0 auto; 
    text-align: center; /* for IE */ 
    } 

    #yourdiv { 
    width: 400px; 
    border: 1px solid #000; 
    } 
</style> 

.... 

<div id="container"> 
    <div id="yourdiv"> 
    weee 
    </div> 
</div>

fonte

2010-04-22 13:29:31 espais

Questo non funzionerà su altri browser o in modalità Standard, dal momento che i margini automatici dovrebbero essere sullo stesso elemento della larghezza. – bobince

funziona bene per me in modalità diverse da Quirks, non capisco il costante down-vote – espais

Credo che il il align="center" allinea il contenuto, quindi se si voleva utilizzare tale metodo, si avrebbe bisogno di usarlo in un 'wraper' div - un div che avvolge solo il resto.

text-align sta facendo un genere simile di cosa.

left:50% viene ignorato a meno che non si imposta la posizione del div come qualcosa di relativo o assoluto.

I metodi generalmente accettati è quello di utilizzare le seguenti proprietà

width:500px; // this can be what ever unit you want, you just have to define it 
margin-left:auto; 
margin-right:auto;

i margini essendo automatico significa che crescono/ridursi a corrispondere alla finestra del browser (o div genitore)

UPDATE

Grazie a Meo per averlo inserito, se lo aveste voluto, avreste potuto risparmiare tempo e usare la mano corta per il margine.

margin:0 auto;

questo definisce la parte superiore e inferiore come 0 (in quanto è pari a zero non importa per la mancanza di unità) e la sinistra e la destra ottenere definito come 'auto' È quindi possibile, se si wan't di override dì il margine superiore come faresti con qualsiasi altra regola CSS.

fonte

2010-04-22 13:32:32 thecoshman

si potrebbe usare gli stili in linea per margine .. margine: 0 auto; Il problema – meo

è IE che non può mostrare div esattamente centrato; ho provato margin-left-right: auto ma non ha funzionato su IE –

@meo Un punto giusto. Di solito è meglio prendere il tuo consiglio in quanto aiuta a ridurre le dimensioni del file, non molto so, ma ogni piccolo aiuto. Anche se per la guida, aiuta a spiegare le proprietà "richieste" per farlo funzionare. – thecoshman

dipende se il div si trova in posizione: assoluto/fisso o relativo/statico

per la posizione: assoluta & fissato

<div style="position: absolute; /*or fixed*/; width: 50%; height: 300px; left: 50%; top:100px; margin: 0 0 0 -25%">blblablbalba</div>

Il trucco è quello di avere un margine negativo metà della larghezza l'oggetto

per position: relative & statico

<div style="position: relative; /*or static*/; width: 50%; height: 300px; margin: 0 auto">blblablbalba</div>

per entrambe le tecniche è imperativo impostare la larghezza

fonte

2010-04-22 13:34:59 meo

Come fare un Allinea al centro div in HTML

risposta

Problemi correlati