Foros del Web » Creando para Internet » CSS »

Alineacion imagen+texto dentro de un titulo

Estas en el tema de Alineacion imagen+texto dentro de un titulo en el foro de CSS en Foros del Web. Hola me piden que dentro de un titulo aparezca a la derecha centrada una imagen y a continuacion un texto centrado. El html no lo ...
  #1 (permalink)  
Antiguo 26/11/2014, 05:14
 
Fecha de Ingreso: febrero-2010
Mensajes: 2
Antigüedad: 14 años, 10 meses
Puntos: 0
Alineacion imagen+texto dentro de un titulo

Hola me piden que dentro de un titulo aparezca a la derecha centrada una imagen y a continuacion un texto centrado.
El html no lo puedo tocar asi es el html que me pasan.
Código HTML:
Ver original
  1. <h1><img src="logo.png" alt="OSZ IMT" /> Actualidad</h1>


Código CSS:
Ver original
  1. img{
  2.     float: left;
  3.     vertical-align: baseline;
  4.     width: 25%;
  5. }
  6. h1{
  7.     font-size: xx-large;
  8.     font-weight: 600;
  9.     --Aqui es donde he de poner como centrarlo, pero no se como hacerlo.
  10. }

Última edición por pzin; 26/11/2014 a las 08:59 Razón: Formato código
  #2 (permalink)  
Antiguo 26/11/2014, 08:58
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Alineacion imagen+texto dentro de un titulo

No flotes la imagen y aplícale un display: inline-block.

Usa la opción highlight para cuando quieras publicar código.
__________________
(:
  #3 (permalink)  
Antiguo 28/11/2014, 20:51
 
Fecha de Ingreso: septiembre-2012
Mensajes: 74
Antigüedad: 12 años, 3 meses
Puntos: 4
Respuesta: Alineacion imagen+texto dentro de un titulo

Hola, vamos a hacerte los deberes...

A los elementos en línea como son las imágenes les puedes añadir una propiedad llamada vertical align. Simplemente poniéndole a la imagen un vertical-align:middle la imagen te saldrá centrada horizontalmente con el texto.

Código HTML:
img{
vertical-align:middle;
}
Ah, por cierto, float para alinear elementos no es una buena práctica como bien dicen por aquí arriba. bye!

Etiquetas: alineacion, html, titulo, width
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




La zona horaria es GMT -6. Ahora son las 23:33.