div:centrare verticalmente...ancora..

[dannie]

Spero di non far venire la nausea a qualcuno ma sono di nuovo qua a riproporre il problema della centratura verticale...
Ho un problema apparentemente banale:

<div id='box'>Testo da centrare</div>

dove il box ha dimensioni note ed è posizionato in modo assoluto nella pagina, mentre il testo è dinamico, quindi potrebbe occupare una o più righe.
Ovviamente prima di postare ho fatto una ricerchina e ho trovato tante soluzioni, alcune delle quali non ho nemmeno capito... Quello che ho provato a fare è stato:
- usare margin:auto ....ma inutilmente
- usare line-height, ma con più di una riga non so come gestirlo
- leggere il metodo "classico" del posizionamento assoluto a metà contenitore e impostazione dei margin negativi... ma anche aggiungendo un div in più per la scritta non ne conosco le dimensioni quindi non so come impostare i margin...
Vorrei capire: si può fare qualcosa o è meglio rinunciare a priori?

[seed_squall_it]

Uhm...non è un problema banale come sembra.

Premesso che margin: auto serve a centrare solo orizzontalmente (applicando margin-top: auto e margin-bottom: auto infatti non si ottiene la centratura verticale) e che line-height non è altro che "l'altezza di una riga" per gli elementi in linea, il metodo col posizionamento assoluto, l'offset a 50% e i margini negativi non funziona proprio perché non conosci a priori le dimensioni del "box" (anonimo o aggiunto ad hoc) che contiene testo.

Sinceramente non mi viene in mente nulla...perché non posti l'indirizzo di una delle soluzioni che "non hai capito", così gli dò un'occhiata e cerco di spiegartela?

[dannie]

Basta digitare allineamento verticale (o simili) nella casellina di ricerca e ne vengono fuori un sacco di soluzioni.... ma si tratta più che altro di combinazioni di quelle che ho già descritto e che nel mio caso quindi non vanno bene...
Io un'ideuccia "profana" l'avrei avuta ma non so se esiste un modo di metterla in pratica... Con line-height si centra senza problema il testo di una sola riga (basta impostare appunto line-height = height del contenitore)... non c'è un modo di far credere al mio box che deve centrare un "oggetto" che occupa una sola riga? Ho provato:

<div id='box'><div id='da_centrare'>Testo da centrare</div></div>

assegnando a box line-height pari a height e a da_centrare niente... ma mi ha effettivamente scritto il testo su righe alte come il div. Allora ho provato ad assegnare anche a da_centrare una line-height:normal ma sono tornata ad avere il testo allinaeato in alto... sono a corto di idee...
Capito cosa avrei voluto fare? Secondo te è possibile?

[seed_squall_it]

Capito ho capito, ma l'idea che hai avuto purtroppo non funziona perché quando il testo va a capo (sia forzato con un
che "naturalmente"), il browser lo considera sempre su due righe. Da quello che so io, l'unico modo di centrare verticalmente qualcosa è conoscerne l'altezza...

L'"oggetto unico" che vorresti far credere al box non è il testo, ma il box che lo contiene (sia che tu lo scriva come div, che come p e anche se è un box anonimo). Il testo purtroppo è solo il contenuto del box e quindi si allinea in alto.

[Alberto]

prova ad impostare un margin-top: px, nello stile del div da centrare

[dannie]

So... no solution?
Peccato, allora mi rassegno ad avere il testo in alto... Ti ringrazio comunque davvero tanto per la pazienza e l'enorme aiuto di oggi, spero di poter ricambiare un giorno!
Ciauuu...

[seed_squall_it]

Di nulla...so cosa vuol dire fare esperimenti con i CSS e impazzire a causa di IE!!!

Ciaooo!

[seed_squall_it]

Sai cosa pensavo? In realtà un modo ci sarebbe per centrare verticalmente un testo dinamico, ma deve essere realizzato per forza tramite un linguaggio lato server (come PHP o ASP) e in base a questo deve applicare una differente regola di stile (anche in linea) sfruttando il comportamento di line-height.

Mi pare che questo non sia il posto più adatto per parlare di programmazione lato server...al limite, se vuoi puoi mandarmi una mail e ti spiego più dettagliatamente la cosa. Non so nulla di ASP ma me la cavo bene in PHP...quindi se usi questo linguaggio per "comporre" le tue pagine, scrivimi pure.

[dannie]

Originariamente inviato da Alberto
prova ad impostare un margin-top: px, nello stile del div da centrare

Ciao, scusa ma ho visto solo ora il tuo post! Cosa dovrei inserire? Così senza valore non funziona....

[dannie]

Originariamente inviato da seed_squall_it
Sai cosa pensavo? In realtà un modo ci sarebbe per centrare verticalmente un testo dinamico, ma deve essere realizzato per forza tramite un linguaggio lato server (come PHP o ASP) e in base a questo deve applicare una differente regola di stile (anche in linea) sfruttando il comportamento di line-height.

Mi pare che questo non sia il posto più adatto per parlare di programmazione lato server...al limite, se vuoi puoi mandarmi una mail e ti spiego più dettagliatamente la cosa. Non so nulla di ASP ma me la cavo bene in PHP...quindi se usi questo linguaggio per "comporre" le tue pagine, scrivimi pure.

Inviata mail...grazie!