allineamento verticale di 3 img + testo

[Maxa12]

Salve,
devo allinere 3 diverse immagine verticalmente in modo che mi stiano dentro un "box" (il riquadro dal bordo grigio chiaro) creato tramite div.
Possibilemente dovrei riuscire anche a inserire del testo subito sotto ogni immagine.

Ho creato questo css:

.border_box { border: solid 1px #ddd;}
.border_box div.left{top-padding:10px;float: left; padding-right:10px;}
.border_box div.center{top-padding:10px;float: center; padding-right:10px;}
.border_box div.right{top-padding:10px;float: right}

con questo pezzo di html (ciò che incollo sta dentro ad un contenitore "content")

<div class="border_box">
  <div class="left"">
    [img]gen.jpg[/img]
  </div>
  <div class="center">
    [img]img.jpg[/img]
  </div>
  <div class="right">
    [img]ria.jpg[/img]
  </div>
</div>

ma il risultato è questo:


Vi ringrazio

[dwj]

Hm, ma intendi allinearle orizzontalmente uno a fianco all'altro o distribuite nel box?

Nel primo caso nn hai bisgno di div o css particolari, o cmq, se devi inserire delle didascalie metti tutti e tre i div float:left e sei a posto.

Nel secondo caso: anzitutto nn esiste il float:center. devi giocartela come se fosse un layout a tre colonne (su HTML.it c'è un bell'articolo sul float qui ). Quindi ecco il codice HTML modificato con un po' d spiegazioni:

<div class="border_box">
 
  <div class="left">[img][/img]
 
    testo</div> 
 
  <div class="right">[img][/img]
 
    testo</div>
 	
  <div> [img][/img]
 
    testo</div> 
</div>

e qui il CSS:

.border_box { border: solid 1px #ddd; text-align:center }
.border_box div {text-align:center;} 
.border_box div.left{top-padding:10px;float: left ; padding-right:10px;}
.border_box div.right{top-padding:10px;float: right }

Spero di essere stato d aiuto

ciao ciao

[Maxa12]

Intanto grazie mille.

Intendevo la seconda soluzione, però ora me le allinea una sotto l'altra e non una accanto all'altra, com'è possibile?

[digitos]

io di solito accanto a float:left affianco anche un bel display:inline.