Come centrare un articolo con il css
Come scrivere un riquadro al cento esatto dello schermo utilizzando il CSS. È un'operazione molto semplice, che ha il vantaggio di rendere immediatamente comprensibile il linguaggio CSS. Per prima cosa occorre definire le sue dimensioni:
#box
{
width: 400px;
margin: 1em auto;
text-align: left;
}
Le istruzioni precedenti associano al nome #box un layout con la caratteristica d'essere largo 400 pixel e con i margini destro e sinistro impostati su 'auto', ossia centrati sullo schermo. Il testo contenuto nel box viene allineato a sinistra.
L'operazione successiva consiste nel definire il body.
body {
text-align: center;
}
Quest'ultima dichiarazione è resa necessaria per far interpretare correttamente l'operazione di centramento al browser Internet Expolorer. In realtà la regola text-align dovrebbe servire per allineare il testo e non i box. In questo semplice esempio l'abbiamo utilizzata nel campo body per semplicità espositiva. Per evitare che la regola text-align venga applicata anche nel box, precedentemente abbiamo utilizzato una regola specifica di allineamento a sinistra all'interno di #box.
A questo punto basterà scrivere le ultime righe di codice Html per richiamare il tutto.
<body>
<div id='box'>
<p>Questo testo sarà visualizzato in un box posto al centro dello schermo e largo 400 pixel</p>
</div>
</body>
Senza utilizzare le tabelle abbiamo così realizzato un box centrato sullo schermo pari a una larghezza definita di 350 pixel. Se volessimo applicare una larghezza percentuale sarebbe sufficiente modificare la definizione del box nel seguente modo:
