Nwlapcug.com


Come centrare un Tag DIV nella pagina con i CSS

Come centrare un Tag DIV nella pagina con i CSS


Dal codice di foglio di stile CSS è entrato nell'uso comune, Web designer caduto tecniche tabella di codifica in favore di layout basati su CSS. Confusione circonda le tecniche necessarie per il posizionamento < div > e tag simili utilizzando i CSS, però. Si tratta di poiché non esiste alcun modo semplice per fare cose semplici come elementi su pagine di centraggio. È possibile centrare il tag < div > in CSS manipolando i margini e impostare la larghezza delle, e impostare l'allineamento del testo su un contenente < div > rende tutto funziona anche su Internet Explorer 6.

Istruzioni

1

Utilizzare un editor di codice quali jEdit, BBEdit o Notepad + + per aprire il tuo file HTML per la pagina contenente il tag < div > si desidera centrare. Individuare l'elemento < div > si desidera centrare e prendere nota del relativo attributo ID. Se non vedete un attributo ID nel tag < div >, aggiungerlo in questo modo:

< div id = "centrato" > contenuto... < / div >

È possibile denominare l'attributo ID qualunque gradite, ma scegliere un nome univoco e significativo.

2

Aggiungere un contenitore < div > intorno il < div > che si desidera centrare. Questo tag < div > allestirà uno spazio apposito nella pagina dove è possibile centrare qualsiasi cosa volete, anche un elemento < div > nidificato. Ecco un esempio:

< div id = "container" >

< div id = "centrato" > contenuto... < / div >

< / div >

Denominare il contenitore < div > qualunque gradite, ma maggior parte dei progettisti utilizzano nomi come "contenitore" o "avvolgere". Verificare che l'attributo ID non sia in conflitto con qualsiasi altro tag HTML ID nel file HTML, però.

3

Aggiungere il codice CSS per centrare il tag < div >. È necessario aggiungere questo codice a un esterno. File CSS, e se il tuo sito utilizza già una, vedrete il codice simile al seguente tra il tag < head >:

< link rel = "stylesheet" href="style.css" type = "text/css" >

Se vedete che il codice, quindi aprire il file "Style. css". È inoltre possibile aggiungere < style > e < / stile > tag tra i tag < head > e aggiungere codice tra quelli, ma poi il codice sarà solo effetto HTML file CSS dove hai aggiunto il codice.

4

Utilizzare questo codice CSS per centrare un < div > all'interno di un contenitore < div >:

contenitore {text-align: center;} centrato {margine sinistro: auto; margin-right: auto; Larghezza: 200px; text-align: left;}

Dare il contenitore < div > un allineamento centrato per assicurarsi il centrato < div > visualizzati correttamente in Internet Explorer 6. Utilizzare auto margini su centrato < div > centro di essa nel browser moderni. È necessario aggiungere una larghezza al < div > centrato per il centraggio per lavorare. Reimpostare l'allineamento del testo in modo testo non diventare anche centrato.