Alinear imagen al texto con css

publicado por: Anonymous

estoy intentando crear una alerta con css y html como se muestra en la imagen:notificacion
ya tengo la imagen encima del rectangulo y que el rectangulo comience justo a mitad de la imagen, sin embargo no logro que mi alerta quede igual que la imagen que subi porque el icono no queda alineado al texto, ¿Alguien podria apoyarme?

Mi código en html es el siguiente:

<div class="notificiacion">
 <p class="rectangulo">
  Aqui va el texto de mi alerta
 </p>
</div>

Mi código en css es:

.rectangulo {
 background-color: #fff6d9;
 border-radius: 4px;
 padding: 15px;
 margin-bottom: 20px;
 font-size: 14px;
 font-family: Arial;
 color: #4c4c4c;
 margin-left: 22px;
}

.notificiacion > img {
 position: absolute;
 width: 33px;
 float: left;
 vertical-align: middle;
}

Con este código logro el siguiente resultado:
resultado_codigo

solución

Como ya te mencionaron, la propiedad vertical-align no funciona con elemento float, solo funciona con elementos inline. Te comparto un ejemplo de como quedaría tu código para lograr lo que necesitas.

_x000D_

_x000D_

.notificiacion{_x000D_
  width: 300px;_x000D_
  height: 50px;_x000D_
  background-color: #fff6d9;_x000D_
  border-radius: 10px;_x000D_
}_x000D_
_x000D_
.notificiacion{_x000D_
  line-height: 3em;_x000D_
}_x000D_
_x000D_
.notificiacion img{_x000D_
  float: left;_x000D_
  margin-top: 3%;_x000D_
  margin-left: 3%;_x000D_
  margin-right: 4%;_x000D_
}_x000D_
_x000D_
.notificiacion p{_x000D_
  _x000D_
}

_x000D_

<div class="notificiacion">_x000D_
  <img src="http://placehold.it/30x30" alt="">_x000D_
  <p>Aqui va el texto de mi alerta</p>_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *