Foros del Web » Creando para Internet » CSS »

Alinear texto con Icono

Estas en el tema de Alinear texto con Icono en el foro de CSS en Foros del Web. Hola a todos, Por favor, podríais decirme como puedo hacer que el texto del título esté alineado en el centro con el icono?: http://goo.gl/CtX9uh Gracias. ...
  #1 (permalink)  
Antiguo 29/11/2015, 06:05
Avatar de danideu  
Fecha de Ingreso: febrero-2005
Ubicación: Barcelona
Mensajes: 213
Antigüedad: 19 años, 1 mes
Puntos: 5
Pregunta Alinear texto con Icono

Hola a todos,

Por favor, podríais decirme como puedo hacer que el texto del título esté alineado en el centro con el icono?:

http://goo.gl/CtX9uh


Gracias.
Saludos.
  #2 (permalink)  
Antiguo 29/11/2015, 09:55
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 8 años, 9 meses
Puntos: 263
Respuesta: Alinear texto con Icono

debes modificar un poco la estructura, y hacer esto:

Código CSS:
Ver original
  1. .crmTile {
  2.    display:flex;
  3.    display: -webkit-flex;
  4.    width: 100%;
  5.    background-color:#1C8C30;
  6.     padding:15px;
  7.     border-radius:15px;
  8. }
  9. /* Un div con algo de altura para ver que el efecto funciona */
  10. .crmTile div:first-child {
  11.    display: block;
  12.    width: 80px;
  13.    height: 65px;
  14. }
  15. /* Y con los margin top y bottom en “auto” conseguimos que flex funcione perfectamente */
  16. .crmTile div:last-child {
  17.    margin-top: auto;
  18.    margin-bottom: auto;
  19.     padding-left:20px;
  20.     color:#fff;
  21.  
  22. }

Código HTML:
Ver original
  1. <div class="crmTile">
  2.     <div>
  3. <img height="65" src="/simon/icon_simon.png" width="80">
  4.     </div>
  5.    <div>
  6.         <h2>Memoriza los números</h2>
  7.    </div>
  8. </div>

aqui una muestra:

http://jsfiddle.net/xhawz9s1/
__________________
[email protected]
HITCEL
  #3 (permalink)  
Antiguo 30/11/2015, 05:29
Avatar de danideu  
Fecha de Ingreso: febrero-2005
Ubicación: Barcelona
Mensajes: 213
Antigüedad: 19 años, 1 mes
Puntos: 5
Respuesta: Alinear texto con Icono

Muchas gracias, lo probaré y te digo si me funciona.

Saludos.

Etiquetas: alinear, icono, todo
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 03:33.