[CSS] Immagine allineata col testo

Printable View

08-06-2009, 19.41.10

[CSS] Immagine allineata col testo

Ciao a tutti, ho un problema.. (e quando mai! XD)... comunque, volevo fare questa cosa:

Citazione:

(*) testo testo testo testo

Mettendo nel css:

Codice PHP:

#div { text-align: center; } #div img { float: left; width: auto; }

Solo che il testo viene centrato, ma l'immagine si sposta tutta a sinistra! xDDD
Come faccio a mettere l'immagine accanto al testo?...ma il testo deve essere allineato con il centro dell'altezza dell'immagine! XD

(*) = immagine con collegamento 45x31px

Grazie mille. Ciao Davide! ^^"
08-06-2009, 19.46.08

AL testo dai il padding-left o padding-right della larghezza immagine più qualche pixel e hai finito.

Un esempio? Nel mio sito il menù, ha delle icone.

Allo span ho dato padding-left: 16px; dato che l'immagine è di 14 pixel, solo che io l'immagine l'ho data dome sfondo :wink:
08-06-2009, 19.49.28

Si anche mettendo il padding-left l'immagine si avvicina, ma il testo si allontana! La spaziatura tra testo e img non diminuisce! XDDD
08-06-2009, 19.50.48

Allora spiegati meglio.

Se fai <img src="" /> <span></span> l'immagine e il testo non sono messi bene scusa?
08-06-2009, 20.01.40

Codice PHP:

<div id="div"><a href="#"><img src="#url_img#" alt="" /></a> Il testo deve andare qui...</div>

Ecco lo schema che uso! :wink:
08-06-2009, 20.06.39

Scusami eh, è ovvio che ti va a sinistra l'immagine se dai float left :|

Io non ho ancora capito cosa ti serve.
08-06-2009, 20.14.55

Devo mettere l'immagine come la "posizione ok"... invece a me viene come la "posizione ko"! XD
http://i39.tinypic.com/2dl5emr.png
Ciauu e Grazie! ^^"
09-06-2009, 01.16.41
acsocmel

metti line-height del div uguale a height dell'immagine
oppure height dell'immagine uguale a line-height del div
:-)
10-06-2009, 11.34.13

Potresti usare anzichè float al div il parametro Align dell'immagine.
Nel mio sito ho fatto esattamente così per la gif accanto le voci dei menù, è il risultato è quello che vedi.
Se a causa delle dimensione dell'immagine hai problemi con la riga sotto, aggiungi al tag br che usi per andare a capo la dichiarazione Clear="left" è il gioco è fatto.

Esempio di codice tratto dal mio sito:

Codice HTML:

<a href="http://morgensterngdr.altervista.org/news.php"><img src="./Immagini/iconews.gif" alt="Ci Sono News!" align="left" border="0" height="19" width="32"> News</a><br clear="left"> <a href="http://morgensterngdr.altervista.org/email.php"><img src="./orb.gif" alt="" align="left" border="0" height="12" width="12"> Contattami</a><br> <a href="http://morgensterngdr.altervista.org/forum/index.php"><img src="./orb.gif" alt="" align="left" border="0" height="12" width="12"> Forum</a>

In questo caso ho messo la dichiarazione direttamente all'immagine, nel momento in cui la inserisco, ma se la metti nel Css funziona comunque.

Per dare lo spazio puoi usare un Div con la carateristica Padding, o se ti è sufficente un Pixel basta uno schifoso ma funzionale  
10-06-2009, 18.54.36

Si.....allora addio xHTML e CSS 2.1! Hihihi
10-06-2009, 19.16.48

Citazione:

Originalmente inviato da sIM

Si.....allora addio xHTML e CSS 2.1! Hihihi

:|

Guarda che line-height è sempre stato valido...
10-06-2009, 19.31.29

Io parlo per il codice che ha postato @morgensterngdr
10-06-2009, 20.00.22

Citazione:

Originalmente inviato da sIM

Si.....allora addio xHTML e CSS 2.1! Hihihi

Con xHTML non credo sia valido, ma con CSS 2.1 assolutamente si, già testato con il validetor è mi ha detto assolutamente ok. Stessa cosa per HTML, ma non so per xHTML.

Comunque non avevo notato lo / a fine del tag img, e quindi non avevo capito che era xHTML.