Duda sobre alineación

[Linton]

¿Cuál es la mejor manera de reproducir con HTML y CSS lo que pongo abajo, sabiendo que los cuadrados amarillos son fotos?

¡Gracias!

[Atomycko]

Literal...

Código HTML:

<div style="width:500px;overflow:hidden;color:red;font:20px Verdana;text-align:right;">
    <div style="float:left;box-sizing:border-box;width:50%;padding:10px;">
        Baltimore<img src="dir/img.ext" alt="" style="vertical-align:bottom;margin-left:5px;background-color:yellow;" />
    </div>
    <div style="float:left;box-sizing:border-box;width:50%;padding:10px;">
        Viena<img src="dir/img.ext" alt="" style="vertical-align:bottom;margin-left:5px;background-color:yellow;" />
    </div>
    <div style="float:left;box-sizing:border-box;width:50%;padding:10px;">
        Lisboa<img src="dir/img.ext" alt="" style="vertical-align:bottom;margin-left:5px;background-color:yellow;" />
    </div>
    <div style="float:left;box-sizing:border-box;width:50%;padding:10px;">
        Hamburgo<img src="dir/img.ext" alt="" style="vertical-align:bottom;margin-left:5px;background-color:yellow;" />
    </div>
</div> 

jeje

[Linton]

¡Muchas gracias! Yo lo hacía de otra manera, me había embarullado con line-height para centrar horizontalmente el texto y la viñeta respectiva.

Lo que no entiendo es por qué cambiando vertical-align a la imagen... lo que se mueve es el texto. ¡Una semana sin abrir el Notepad++ y parece que se me ha olvidado todo el CSS!

[Linton]

Para facilitar comentarios lo subo a este fiddle Como puede verse, variando el vertical-align de img lo que cambia es el vertical-align del texto.

[Atomycko]

vertical-align:top; posiciona el elemento desde la parte superior del contenido hacia bajo
vertical-align:bottom; posiciona el elemento desde la parte inferior del contenido hacia arriba

[pzin]

No cambia el texto en si. Al ser elementos en linea igual puede parecerlo, pero realmente estás ajustando la imagen al texto, no al revés. Es como un efecto óptico, o algo así.

[Linton]

Atomycko, eso lo sé Lo que pregunto es por qué se mueve el texto, cuando lo que estoy variando es la imagen.

[Linton]

Pzin, ¡menos mal, pensaba que era un detalle obvio que se me había escapado!

Gracias a los dos, un saludo.