Centrare un articolo con il Css
Come scrivere un riquadro al cento esatto dello schermo utilizzando il CSS. E' 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:
|
#box {
margin: 1em 20%;
text-align: left;
} |
|
In quest'ultimo esempio abbiamo impostato il margine destro e sinistro al 20% dello schermo. Il box occupa pertanto una larghezza pari al 60% dello spazio disponibile sul video, adattandosi di volta in volta sulla base delle caratteristiche hardware dell'utente.
20071027
ecomatrix
scrivi al sito
ecomatrix@gmail.com
Guide online
