0

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

2 respuestas 2

2

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.

.notificiacion{
  width: 300px;
  height: 50px;
  background-color: #fff6d9;
  border-radius: 10px;
}

.notificiacion{
  line-height: 3em;
}

.notificiacion img{
  float: left;
  margin-top: 3%;
  margin-left: 3%;
  margin-right: 4%;
}

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

3
  • Excelente, lo he logrado de esta forma en base a tu respuesta: Commented el 7 dic. 2017 a las 15:54
  • .notificiacion{ line-height: 3em; } .notificiacion img{ float: left; margin-top: .7%; margin-left: -1%; margin-right: 1%; } .notificiacion p{ width: 300px; height: 50px; background-color: #fff6d9; border-radius: 10px; } Commented el 7 dic. 2017 a las 15:54
  • Excelente que bien que te haya sido de utilidad :)
    – Amado
    Commented el 7 dic. 2017 a las 15:57
0

Eso pasa por que la propiedad vertical-align no funciona con elementos que tienen la propiedad float, para que esto te funcione debes cambiar float: left por display: inline-block para ambos elementos ... no entiendo por que usas position: absolute junto con float: left

Tu código debería quedar así:

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

.notificiacion > img {
 width: 33px;
 display: inline-block;
 vertical-align: middle;
}
4
  • Hola, utilizo el absolute para que sobreponga la imagen en el texto con background naranja, si le coloco el display: inline-block me los coloca sobre la misma linea pero uno al lado del otro Commented el 7 dic. 2017 a las 15:38
  • Entonces no entendí tu pregunta.. Commented el 7 dic. 2017 a las 15:39
  • requiero que la imagen este alinenada al texto pero sobre el background del texto, como se visualiza en la primera imagen Commented el 7 dic. 2017 a las 15:41
  • Te sugiero que hagas con tu código un ejemplo completo que se pueda ejecutar en el snippet de SOes, saludos Commented el 7 dic. 2017 a las 15:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.