Allineamento verticale centrato con i css

Nel tentativo di seguire la tendenza che suggerisce la creazione di siti web “tableless” mi sono ritrovato con un banalissimo problema che mi ha fatto perdere un sacco di tempo.

Il comportamento di default di una tabella con una cella (TD) con altessa fissa prevede il posizionamento del testo centrato

cosa che come possiamo vedere è diverso se utilizziamo il tag DIV

Per ottenere lo stesso risultato dobbiamo ricorre ad una serie di piccoli accorgimenti che vedo ad illustravi:

Ho creato una classe “wrapper” (contenitore) con posizionamento relativo e dimensioni fisse (height e width) .
Poi una classe “element” con posizionamento assoluto dove la distanza superiore dal suo contenitore è indicata al 50%, inoltre ho dovuto specificare un margine negativo che dovrebbe essere la meta dell’altezza della riga

/* foglio di stile */<br /> .wrapper {<br /> position: relative;<br /> border: 1px solid #FF0000;<br /> height: 200px;<br /> width: 200px;<br /> }<br /> .element {<br /> position: absolute;<br /> top:50%;<br /> margin-top:-0.5em;<br /> }

</p> <div class="wrapper" > <span class="element"> testo di prova</span> </div> <p>

A seguire le specifiche nel caso dove al posto dell’elemento SPAN avessimo necessità di un ulteriore elemento DIV ad altezza fissa

/* foglio di stile */<br /> .box {<br /> position: absolute;<br /> top:50%;<br /> margin-top:-25px;<br /> height: 50px;<br /> width: 200px;<br /> border: 1px solid #00CC00;<br /> }

Questo è il risultato:
Il box rosso è il DIV contenitore (classe wrapper) mentre il box verde è il DIV interno (classe box) il quale a sua volta contiene un tag SPAN ( class element ) con il testo visualizzato

In casi come questi, mi chiedo se il “non utilizzare” in modo assoluto le tabelle abbia sempre dei vantaggi ..
Ma vediamo il lato positivo: “abbiamo imparato una cosa nuova“

Questo piccolo esperimento è ispirato a questo interessantissimo articolo dove sono presentate anche altre tecniche che però non garantiscono la stessa compatibilità.