texto al medio de una imagen

manel2292 · #1 (**permalink**) 24/11/2011, 05:45

Hola, tengo lo siguiente:

[imagen] [texto]

como puedo hacer que el texto se ponga a la mitad de la altura de la imagen y no arriba?

gracias.

ryugen · #2 (**permalink**) 24/11/2011, 06:33

hay varias opciones, y algunas dependen del contexto
podrías poner imagen y texto como:

Código CSS:

Ver originaldisplay:inline-block;

y luego al texto

Código CSS:

Ver originalvertical-align:middle;

Otra sencilla sería al texto:

Código CSS:

Ver originalposition:relative;
top:(valor)px

donde valor es la mitad del imagen

IsaBelM · #3 (**permalink**) 24/11/2011, 08:38

en realidad has de usar la propiedad display con los valores (table y table-cell). entonces puedes usar vertical-align

kseso? · #4 (**permalink**) 24/11/2011, 08:45

Erroneo.
Dicha propiedad se aplica también a los elementos de "en línea".

Sugerencia:
Envuelva tanto el texto como la imagen en la misma etiqueta /p/li/... y aplique el alineamiento vertical.

IsaBelM · #5 (**permalink**) 24/11/2011, 08:57

puedes dejarnos algún ejemplo de lo que comentas??

ryugen · #6 (**permalink**) 24/11/2011, 12:40

para que en un elemento con "display:inline-block" funciona la propiedad "vertical-align:middle" debe tener un alto especificado. Entonces mi solucion queda acotada a los casos donde el texto que acompaña a la imagen tiene una altura definada o bien tiene altura 100% y la hereda del padre (que como en el caso del hijo tiene que estar definida).

En el caso de los elementos en linea nunca lo he visto

kseso? · #7 (**permalink**) 24/11/2011, 13:59

¿De qué ha de ser el ejemplo?
¿De mi matización a su afirmación o de la sugerencia que hice?

Bueno, ante mi duda y por el mismo precio, a ambas:

Los que dice la especificación oficial, traducida al español por el sidar:
http://www.sidar.org/recur/desdi/tra...vertical-align
El cómo lo explica una página de referencia como librosweb.es:
http://www.librosweb.es/referencia/c...cal-align.html
Y de la misma página, una ilustración de cómo actúan los distintos valores posibles:
http://www.librosweb.es/css/capitulo6/texto1.html Hacer algo de scroll hasta el vertical-align

Y sobre la sugerencia que hacía, algo tan sencillo como:

Código HTML:

Ver original<p><img alt="alt" src="ruta_imagen.ext" /> Un poco de texto para alinear</p>

Y su css asociado:

Código CSS:

Ver originalimg {
vertical-align: middle;
}

¿Era ésto lo solicitado?

IsaBelM · #8 (**permalink**) 24/11/2011, 14:07

una vez mas, cosa que creo normal arreglo a lo ambigua que es la petición del usuario, ha habido dos interpretaciones. la vuestra y la mía.
mi interpretación es que quiere que el texto aparezca, centrado horizontal y verticalmente, sobre la imagen

kseso? · #9 (**permalink**) 24/11/2011, 14:20

Cita:

Iniciado por manel2292

Hola, tengo lo siguiente:

[imagen] [texto]

como puedo hacer que el texto se ponga a la mitad de la altura de la imagen y no arriba?

gracias.

Creo que, pese a la poca información facilitada y total ausencia de códigos, está claro que habla de alineación vertical. Es más, creo que esa fue su interpretación inicial, pues en #3 también menciona la propiedad vertical-align.

Pero vamos, que sólo es mi interpretación particular.

Por cierto, no aclaró si eran esos los ejemplos que solicitaba.

IsaBelM · #10 (**permalink**) 24/11/2011, 15:44

claro que hablo de vertical-aling. mas vale un ejemplo que mil palabras. con éste, entenderás lo que digo en el post #3 y #5

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#cont {width: 280px; height: 280px; background-color:#000;}
#cont[id] {display: table;}

#aligncontenido[id] {display: table-cell; vertical-align: middle;}
#aligncontenido div {margin: 0 auto; width: 100px; height: 100px; background-color: #fff;}
</style>
</head>
<body>
<div id="cont">
<div id="aligncontenido">
<div>Texto</div>
</div>
</div>
</body>
</html>

el ejemplo que pedía era arreglo a la interpretación, expuesta en el post #5, de a que se refiere el usuario. como puedes ver, ni el ejemplo, ni las ligas (aunque te las agradezco. ya las había leído con anterioridad a este tema) tienen nada que ver con dicha interpretación

kseso? · #11 (**permalink**) 24/11/2011, 19:06

Pero ¿está hablando en serio o soy yo que no pillo la broma?
Aunque creo que más bien es una pequeña tomadura de pelo, porque ¿qué tiene que ver el código que ahora pone con la consulta inicial del tema?
Sus cajas dentro de cajas en nada se parece a lo demandado y planteado inicialmente y basado en una imagen y algo de texto.

Cita:

Iniciado por manel2292

Hola, tengo lo siguiente:

[imagen] [texto]

como puedo hacer que el texto se ponga a la mitad de la altura de la imagen y no arriba?

gracias.

nah! definitivamente, debo ser yo.

manel2292 · #12 (**permalink**) 25/11/2011, 05:23

muchas gracias a todos, voy a probar y comento los resultados.

manel2292 · #13 (**permalink**) 25/11/2011, 05:35

vamos a ver, ahora he probado:

Código HTML:

Ver original<ul id="opciones_usuario">
                                    <li> <a href="index.php?contenido=editarperfil"> <img src="img/perfil.png" title="Editar perfil">  Editar Perfil </a> </li>
                                    <li> <a href="index.php?contenido=presupuestos"> <img src="img/presupuestos.png" title="Mis presupuestos"> Mis Presupuestos </a>  </li>
                                    <li> <a href="index.php?contenido=envios"> <img src="img/envios.png" title="Mis pedidos"> Mis Pedidos </a> </li>
                                </ul>

Código CSS:

Ver originalul#opciones_usuario li
{
list-style:none;
vertical-align:middle;
}

y no me funciona, el texto queda en la parte de abajo de la imagen.

he probado tambíen:

Código CSS:

Ver originalul#opciones_usuario
{
display:inline-block;
}
ul#opciones_usuario li
{
list-style:none;
vertical-align:middle;
}

y queda igual, el texto abajo.

kseso? · #14 (**permalink**) 25/11/2011, 07:16

Es que debe aplicar el vertical-align al elemento de línea.
Tanto las listas (ul) como sus elementos (li) son de bloque. Así que debe definirlo sobre un elemento de línea contenido en ellos.
En su caso, tal como le indicaba en mi ejemplo de #7, a las imágenes:

Código CSS:

Ver originalul#opciones_usuario img {vertical-align: middle;}

ryugen · #15 (**permalink**) 25/11/2011, 08:14

Cita:

Iniciado por kseso?

Es que debe aplicar el vertical-align al elemento de línea.
Tanto las listas (ul) como sus elementos (li) son de bloque. Así que debe definirlo sobre un elemento de línea contenido en ellos.
En su caso, tal como le indicaba en mi ejemplo de #7, a las imágenes:

Código CSS:

Ver originalul#opciones_usuario img {vertical-align: middle;}

Funciona tal cual dices!

Puede verse funcionando acá en http://jsfiddle.net/p4bl1t0/JX3hQ/

No lo sabia realmente!

IsaBelM · #16 (**permalink**) 25/11/2011, 09:12

todo está cristalino siempre y cuando no se lea/interprete con aversión

no voy a repetir lo que ya dije en el post #8. pero para que te quede más claro y no te agarres a un simple baile de números

Cita:

Iniciado por IsaBelM

el ejemplo que pedía era arreglo a la interpretación, expuesta en el post #5 #8, de a que se refiere el usuario. .....

no hay mayor ciego que el que no quiere ver. quién ve ahora gigantes donde sólo hay molinos??