img float left in the middle of the div vertically?

Question

I'd like to add this image in the middle of the div vertically, but it is on top. any ideas how to put this float left image in the middle of the div?

https://jsfiddle.net/2qcz5493/

.full_p{
    width:100%;
    height:80px;
    line-height:80px;
    text-align:left;
    border:1px solid #000;
}
.full_p img{
    float:left;
    width:50px;
    vertical-align:middle;
    border-radius:50px;
}

score 1 · Answer 1 · answered May 28 '18 at 21:10

OK, so in the fiddle the image does not load so I do not have an idea of image size but try this code in your fiddle and see if it helps.

.full_p{
    width:100%;
    height:80px;
    line-height:80px;
    text-align:left;
    border:1px solid #000;
}
.full_p img{
    width:50px;
    vertical-align:middle;
    border-radius:50px;

}

.full_p a{
    float:left;
    width:50%;
    vertical-align:middle;
    border-radius:50px;
   text-align: center;
}

Basically, your element is not a direct child of the div but of a element. This is what is causing the issues in my opinion and so if we style the which is a child of the div then you can get the results you are looking for.

score 1 · Answer 2 · answered May 28 '18 at 21:13

.full_p{
    width:100%;
    height:80px;
  background:black;
    line-height:80px;
    text-align:left;
    border:1px solid #000;
}
.full_p img{
  background:yellow;
    float:left;
    width:50px;
    vertical-align:middle;
    border-radius:50px;
}
a{
  display:table;
  margin: 0 auto;
}

img float left in the middle of the div vertically?

2 Answers2