Allineamento immagini centrato verticalmente con il testo

Ciao a tutti,

cercando qui con "allineamento immagini" ho trovato svariate discussioni ma di allineamento orizzontale.

Mi serve impostare l'allineamento verticale di un'immagine con CSS: io inserisco in un html una cosa tipo questa:

Codice HTML:

---

<img> Testo

---

e mi dà così:
http://foreach.altervista.org/sviz1.png
però io vorrei impostare con CSS un allineamento così:
http://foreach.altervista.org/sviz2.png
(questa l'ho ritoccata con paint dalla prima :lol:)

Sapete dirmi come faccio?



Grazie,
foreach

Così:

Codice HTML:

---

<img src="" alt="" style="vertical-align:middle;" /> Testo

---

Grazie andrea. Senti già che stiamo, mi sai dire come allineo un div in alto a destra della pagina?







Grazie,
foreach

Se lo vuoi semplicemente nell'angolo in alto a destra, devi usare un posizionamento assoluto, se vuoi che rimanga nell'angolo anche mentre scorri la pagina, allora serve un posizionamento fisso.

Codice HTML:

---

<style type="text/css">
/*selettore*/{
        position: absolute;/*oppure fixed se è un posizionamento fisso*/
        top: /*distanza dall'alto*/;
        right: /*distanza da destra*/;
}
</style>

---

Grazie karl94, e senti un'altra cosa, mi dici come faccio a mettere uno sfondo con CSS, tipo questo:

Codice HTML:

---

background: #FFFFFF url('img.png') no-repeat top center;

---

però che dall'alto si distanzia di 100 px?




Fatemi sapere,
foreach

Anziché top, devi mettere la distanza che ti serve, quindi diventa:

Codice:

---

background: #FFFFFF url('img.png') no-repeat center 10px;

---

Bene karl94, funziona.

Ho fatto una pagina in cui ho messo un table con 2 td che sarebbero 2 colonne.

Dentro queste td ho messo dei div.

Per una validazione buona con CSS, si può fare?




foreach

Non ho capito bene cosa intendi, cosa centra la validazione CSS con la struttura del documento HTML?

Allora facciamo così:

ho fatto 2 colonne con table e td: è buono per il CSS o meglio i div per fare le colonne?




foreach

Sarebbe meglio usare i div, sopratutto se stai usando la tabella per creare un layout, l'elemento table con td, tr etc. servono ad inserire una tabella di dati, non per creare un layout, per quello c'è il CSS.

Sì, ecco, io facendo una cosa così:

Codice HTML:

---

<div>
Contenuto
</div>
<div>
Contenuto
</div>

---

Mi visualizza un div sotto un altro, e per visualizzarli uno a fianco dell'altro (quindi le colonne) come si fa?




foreach

Puoi fare così: imposti la larghezza di entrambi al 50% (così hai due colonne della stessa larghezza) e, sempre ad entrambi, la proprietà float su left, ti servirà poi un terzo div su cui impostare un clear: both.

Codice HTML:

---

<div class="colonna">Colonna №1</div>
<div class="colonna">Colonna №2</div>
<div class="clearfix"></div>

---

Codice HTML:

---

<style type="text/css">
        .colonna{
                width: 50%;
                float: left;
        }
       
        .clearfix{
                clear: both;
        }
</style>

---

Grazie karl94, ma mi puoi dire a che serve il <div class="clearfix">?




foreach

Serve per annullare gli effetti del float, se mancasse creerebbe disordine nel layout, per capire cosa intendo, prova a creare due documenti HTML, uno con il div.clearfix e uno senza, così da capire un po' come funziona, oppure puoi giocare con firebug (o simile) e modificare direttamente sul browser la pagina.

Già è vero, c'è una piccola differenza, grazie karl94 :wink:



foreach