Align image to text with css

Navigation
0

I am trying to create an alert with css and html as shown in the image: notification I already have the image above the rectangle and the rectangle begins right in the middle of the image, however I can not get my alert to be the same as the image I uploaded because the icon is not aligned to the text, could someone support me?

My code in html is the following: 

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

My code in css is: 

.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;
}

With this code I achieve the following result: cod_ result

    
asked by Anahi Duarte 07.12.2017 в 16:15
source

2 answers

2

As you mentioned, the vertical-align property does not work with a float element, it only works with inline elements. I share an example of how your code would be to achieve what you need. 

.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>
    
answered by 07.12.2017 / 16:43
source
0

That happens because the property vertical-align does not work with elements that have the property float , for this to work for you you must change float: left for display: inline-block for both elements ... I do not understand why you use position: absolute along with float: left

Your code should look like this: 

.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;
}
    
answered by 07.12.2017 в 16:19
Why does not this query return results? RecyclerView does not enter the onCreateViewHolder