Allineamento immagini centrato verticalmente con il testo

[foreach]

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:

<img> Testo

e mi dà così:

però io vorrei impostare con CSS un allineamento così:

(questa l'ho ritoccata con paint dalla prima )

Sapete dirmi come faccio?



Grazie,
foreach

[andreafallico]

Così:

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

[foreach]

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







Grazie,
foreach

[karl94]

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.

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

[foreach]

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

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

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




Fatemi sapere,
foreach

[karl94]

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

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

[foreach]

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

[karl94]

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

[foreach]

Allora facciamo così:

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




foreach

[karl94]

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.

[foreach]

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

<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

[karl94]

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.

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

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

[foreach]

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




foreach

[karl94]

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.

[foreach]

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



foreach