¿Cómo puedo hacer esto en CSS?

[Linton]

Me estoy desquiciando con un sencillo panel que enlaza a tres secciones, cada vez lo complico más y nada. ¿Cómo puedo hacerlo con CSS?

Gracias de antemano, un saludo.

[pzin]

¿Qué tienes hecho? No parece algo complejo.

[Linton]

¡Eso pensaba yo!
Me da vergüenza, pero vale

Código HTML:

<div class="mercado">
        <div class="caja"><span>mercado</span></div>
        <img src="mer(23).jpg">
    </div>
    <div class="mercado">
        <div class="caja"><span>platos</span></div>
        <img src="cui(9).jpg">
    </div>
    <div class="mercado">
        <div class="caja"><span>tartas</span></div>
        <img src="tar(7).jpg">
 

Después de innumerables cambios:

Código CSS:

.mercado {
    width: 40%;
    height: 130px;
    margin: 0 auto;
}
 
.caja{
    width: 30%;
    margin-top: 20px;
}
 
.mercado span {
    float: left;
    font: 26px Arial;
    margin-left: 20%;
}
 
.mercado img {
    display: inline-block;
    float: left;
}
 

[vick90]

Basta con que pongas esto

Código CSS:

.mercado .caja, .mercado img 
{
  display:inline-block;
  vertical-align:top;
 
}
 

[Linton]

Lo he probado, y no quedan alineadas las fotos con los textos centrados entre sí y respecto a cada foto, como muestro arriba. ¡Gracias!

[Linton]

Bueno, creo que lo conseguí con esto:

Código CSS:

.mercado {
    width: 60%;
    height: 130px;
    margin: 0 auto;
    font: 36px Helvetica;
    color: gray;
    font-weight: bold;
    letter-spacing: .3em;
}
 
.caja {
    width: 30%;
}
 
.mercado .caja, .mercado img {
    display: inline-block;
    vertical-align: middle;
}
 
.mercado img {
    margin-left: 60px;
}
 

Y el resultado es casi exactamente lo que planeaba:

Gracias, un saludo

[vick90]

Si es con middle se me olvido pero que bueno que ya lo solucionaste.

Saludos

[Linton]

Gracias, un saludote.