Allineare testo ai piedi di un DIV
Sviluppo Siti Wednesday 23 May 2007 alle 02:00Che fatica!!! Non riesco a credere che il W3C non abbia mai pensato che un DIV con altezza fissa o meno non possa avere contenuto allineato verticalmente. Potrebbe essere che l’allineamento verticale sia solo una “fisima” dovuta al vecchio design a tabelle, ma se ci pensate, non è una cosa così da evitare o così strana da implementare.
Problema
Mi sono trovato in mano un sito che, in un DIV con altezza e larghezza fissa (height e width), deve contenere del testo, variabile in lunghezza e di conseguenza con una variabile altezza del paragrafo. La parte grafica vuole che questo sia allineato in basso e possa gestirsi in altezza senza problemi. Ho cercato disperatamente una soluzione online, ma su ogni forum in cui finivo non trovavo soluzioni funzionanti!!!
Soluzione
Ho trovato soluzione su questo sito inglese http://archivist.incutio.com/viewlist/css-discuss/39920 che finalmente è riuscito a risolvere questo mio enorme dilemma!! La soluzione, da applicare al vostro CSS (Cascading Style Sheet) come si dice questo sito è:
If you want to align text at the bottom of a div, the best way is to make
the div “position:relative;”, and then put the text in a container (p or div
or whatever) inside the aforementioned div and make it “position:absolute;
bottom:0;”.Se vuoi allineare il testo ai piedi di un div, il miglior modo è rendere il DIV “position:relative;”, e quindi mettere il testo in un contenitore (p o div o qualsiasi altro) all’interno del div precedente e renderlo “position:absolute; bottom:0;margin:0;”.
Soluzione trovato, grafico contento e quindi…possiamo andare a dormire in tutta tranquillità, che dite?!
21 October 2008 alle 17:50
Grazie,
posto moooolto utile!
P.
7 January 2009 alle 11:29
GRANDE! Mi ha salvato.
Grazie
11 June 2010 alle 11:56
Grazie mille! Ho risolto in un attimo un problema che non riuscivo a superare!
21 December 2010 alle 14:09
Ottimo! Purtroppo ho bisogno che la mia soluzione non ABBIA div posizionati in modo assoluto…
20 October 2011 alle 22:14
Grazie 1000, soluzione fantastica!!!