[CSS] Problema con vertical-align

[Fede 88]

div.div_right {
float: right;
width: 170px;
height: 24px;
background-color: white;
margin: auto;
vertical-align: top;
text-align: left;
}

Ho delle div che utilizzano la suddetta classe, variando l'attributo vertical-align le scritte vengono sempre visualizzate nella parte inferiore della div.
Come posso centrarle verticalmente?

[Fede 88]

nessuno?

[MEMon]

Mi sa che ti sfugge a cosa serve il vertical-align, in pratica serve, quando hai una riga più alta del testo(ad esempio perchè c'è un elemento inline più grande, come un'immagine) a dire dove si deve mettere il testo in relazione a sudetto elemento(e si applica all'elemento in questione non al contenitore).

Ora non ho capito bene quello che vuoi fare, ma mi pare che ti serva centrare del testo in altezza in un div.
Provando il codice che hai postato, scrivendo del testo in un div simile, il testo è automaticamente centrato...quindi immagino c'è dell'altro, tipo un font con dimensioni modificate.
Comunque prova intanto a mettere questo nel css div.div_right

line-height:24px;

ps. i margin:auto non metterli se non ti servono, per ora non mettere css che non ti servono realmente, ricordo che gli avevi infilati ovunque.

[Fede 88]

Originariamente inviato da MEMon

ps. i margin:auto non metterli se non ti servono, per ora non mettere css che non ti servono realmente, ricordo che gli avevi infilati ovunque.

Si i margin auto li ho messi praticamente su ogni div e ogni classe, quindi se non mi servono posso eliminarli senza incorrere nello sfasamento della struttura generale del sito?

[MEMon]

Si se non ti servono toglili pure, in generale non applicare stili che non hanno un effetto voluto, almeno ora che sei in "progettazione", ci penserai poi alla fine quando, se vorrai, dovrai validare il css.

[Fede 88]

Ho usato

line-height: 23px;

ed ho risolto quasi tutti i problemi, infatti adesso tutte le div con solo testo sono allineate correttamente.

L'unico problema che ho ancora è con le div dove a fianco del testo ho una piccola immagine (19x19pixel), infatti anche facendo la div in questo modo:

div.div_right {
float: right;
width: 170px;
height: 23px;
padding: 1px 0px 0px 0px;
background-color: white;
line-height: 23px;
text-align: left;
}

Le scritte risultano alla base della div e non centrate verticalmente.

[MEMon]

In quel caso metti vertical-align:middle all'immagine.

[Fede 88]

Il fatto è che l'immagine l'inserisco in con l'innerHTML in questo modo:

 document.getElementById('div_email').innerHTML = "<img src=\"imm/yes.png\">"

Si può modificare comunque l'allineamento?

[MEMon]

Certo, o dai all'immagine una classe, o un id e gli applichi uno stile come al solito, oppure applichi uno stile inline così

 document.getElementById('div_email').innerHTML = "<img src=\"imm/yes.png\" style=\"vertical-align:middle;\">"

[Fede 88]

Per creare la classe per un immagine come faccio?

Con le div facevo così:

div.div_left { 
float: left;
width: 132px;
height: 24px;
padding: 0px 0px 0px 0px;
background-color: white; 
padding: 0px;
text-align: right;
line-height: 23px;
font-weight: bold;
}

Al posto di div dovrei mettere image?

[MEMon]

bhe per dargli una classe basta fare così

 document.getElementById('div_email').innerHTML = "<img src=\"imm/yes.png\" class=\"tua-classe\">"

mentre se vuoi accedere dal css all'immagine senza aggiungere una classe fai così

div.div_left img { 
//stili dell'immagine
}

[Fede 88]

Ho fatto in questo modo:

div.div_right {
float: right;
width: 170px;
height: 23px;
padding: 1px 0px 0px 0px;
background-color: white;
line-height: 23px;
text-align: left;
}

div.div_right img { 
vertical-align: midle;
}

Le div hanno class="div_right"

e dentro hanno:

<img src="imm/no.png"> Errore, ... ...

Però la scritta errore viene sempre visualizzata alla bese della div.

[MEMon]

middle non midle

[Fede 88]

hai ragione... mi sfugge sempre tutto...

Grazie ora funziona tutto alla perfezione.

[Fede 88]

Rieccomi con l'ennesimo problema.

Ho una cella che ha all'interno un bottone e il testo va a finire ancora in basso.

div.div_right img { 
vertical-align: midle;
}

Questo codice non funziona anche per i button?

[MEMon]

Si dovrebbe funzionare.

[Fede 88]

Dovrebbe funzionare così com'è? Non è che la dicitura "img" va sostituita con qualcosa del tipo button...

[MEMon]

ah beh ovvio, va sostituito con input.
Ti conviene studiarti come funzionano i css, ti manacno le basi e ogni volta ti pianterai.

[Fede 88]

Si hai ragione, infatti ho iniziato a usare css copiando esempi qua e la per internet.

Ci sono buone guide cartacee di CSS?

[MEMon]

Su questo non ti so aiutare, io non ho mai aperto un libro.