Foros del Web » Diseño web » CSS »

texto al medio de una imagen

Estas en el tema de texto al medio de una imagen en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/11/2011, 04:45
 
Fecha de Ingreso: junio-2011
Ubicación: Barcelona
Mensajes: 237
Antigüedad: 3 años, 3 meses
Puntos: 14
texto al medio de una imagen

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.
  #2 (permalink)  
Antiguo 24/11/2011, 05:33
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 352
Antigüedad: 6 años, 1 mes
Puntos: 186
Respuesta: texto al medio de una imagen

hay varias opciones, y algunas dependen del contexto
podrías poner imagen y texto como:
Código CSS:
Ver original
  1. display:inline-block;
y luego al texto
Código CSS:
Ver original
  1. vertical-align:middle;

Otra sencilla sería al texto:
Código CSS:
Ver original
  1. position:relative;
  2. top:(valor)px
donde valor es la mitad del imagen
  #3 (permalink)  
Antiguo 24/11/2011, 07:38
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.480
Antigüedad: 6 años, 3 meses
Puntos: 894
Respuesta: texto al medio de una imagen

en realidad has de usar la propiedad display con los valores (table y table-cell). entonces puedes usar vertical-align
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #4 (permalink)  
Antiguo 24/11/2011, 07:45
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 7 años, 3 meses
Puntos: 537
Respuesta: texto al medio de una imagen

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.
  #5 (permalink)  
Antiguo 24/11/2011, 07:57
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.480
Antigüedad: 6 años, 3 meses
Puntos: 894
Respuesta: texto al medio de una imagen

puedes dejarnos algún ejemplo de lo que comentas??
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #6 (permalink)  
Antiguo 24/11/2011, 11:40
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 352
Antigüedad: 6 años, 1 mes
Puntos: 186
Respuesta: texto al medio de una imagen

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
  #7 (permalink)  
Antiguo 24/11/2011, 12:59
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 7 años, 3 meses
Puntos: 537
Respuesta: texto al medio de una imagen

¿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
  1. <p><img alt="alt" src="ruta_imagen.ext" /> Un poco de texto para alinear</p>
Y su css asociado:
Código CSS:
Ver original
  1. img {
  2. vertical-align: middle;
  3. }

¿Era ésto lo solicitado?
  #8 (permalink)  
Antiguo 24/11/2011, 13:07
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.480
Antigüedad: 6 años, 3 meses
Puntos: 894
Respuesta: texto al medio de una imagen

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
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #9 (permalink)  
Antiguo 24/11/2011, 13:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 7 años, 3 meses
Puntos: 537
Respuesta: texto al medio de una imagen

Cita:
Iniciado por manel2292 Ver Mensaje
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.
  #10 (permalink)  
Antiguo 24/11/2011, 14:44
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.480
Antigüedad: 6 años, 3 meses
Puntos: 894
Respuesta: texto al medio de una imagen

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
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #11 (permalink)  
Antiguo 24/11/2011, 18:06
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 7 años, 3 meses
Puntos: 537
Respuesta: texto al medio de una imagen

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 Ver Mensaje
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.
  #12 (permalink)  
Antiguo 25/11/2011, 04:23
 
Fecha de Ingreso: junio-2011
Ubicación: Barcelona
Mensajes: 237
Antigüedad: 3 años, 3 meses
Puntos: 14
Respuesta: texto al medio de una imagen

muchas gracias a todos, voy a probar y comento los resultados.
  #13 (permalink)  
Antiguo 25/11/2011, 04:35
 
Fecha de Ingreso: junio-2011
Ubicación: Barcelona
Mensajes: 237
Antigüedad: 3 años, 3 meses
Puntos: 14
Respuesta: texto al medio de una imagen

vamos a ver, ahora he probado:

Código HTML:
Ver original
  1. <ul id="opciones_usuario">
  2.                                     <li> <a href="index.php?contenido=editarperfil"> <img src="img/perfil.png" title="Editar perfil">  Editar Perfil </a> </li>
  3.                                     <li> <a href="index.php?contenido=presupuestos"> <img src="img/presupuestos.png" title="Mis presupuestos"> Mis Presupuestos </a>  </li>
  4.                                     <li> <a href="index.php?contenido=envios"> <img src="img/envios.png" title="Mis pedidos"> Mis Pedidos </a> </li>
  5.                                 </ul>

Código CSS:
Ver original
  1. ul#opciones_usuario li
  2. {
  3. list-style:none;
  4. vertical-align:middle;
  5. }

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

he probado tambíen:

Código CSS:
Ver original
  1. ul#opciones_usuario
  2. {
  3. display:inline-block;
  4. }
  5. ul#opciones_usuario li
  6. {
  7. list-style:none;
  8. vertical-align:middle;
  9. }

y queda igual, el texto abajo.
  #14 (permalink)  
Antiguo 25/11/2011, 06:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.810
Antigüedad: 7 años, 3 meses
Puntos: 537
Respuesta: texto al medio de una imagen

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 original
  1. ul#opciones_usuario img {vertical-align: middle;}
  #15 (permalink)  
Antiguo 25/11/2011, 07:14
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 352
Antigüedad: 6 años, 1 mes
Puntos: 186
Respuesta: texto al medio de una imagen

Cita:
Iniciado por kseso? Ver Mensaje
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 original
  1. ul#opciones_usuario img {vertical-align: middle;}
Funciona tal cual dices!

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

No lo sabia realmente!
  #16 (permalink)  
Antiguo 25/11/2011, 08:12
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.480
Antigüedad: 6 años, 3 meses
Puntos: 894
Respuesta: texto al medio de una imagen

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 Ver Mensaje
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??
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Etiquetas: medio
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 08:13.
SEO by vBSEO 3.3.2