How to vertically centred an image inside a floating div

Question

.container{
 float:right;
 border: 1px solid blue;
 height: 100px;

}

.container img{
  width:80px;
  height:20px;
  vertical-align:middle;
  border: 1px solid red;
}

<div class="container">
<img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png?w=590&h=800&756A88D1-C0EA-4C21-92BE0BB43C14B265" />
</div>

My question, is how can you centred the image vertically inside a floating div?

Answer 1

Use Flexbox:

.container{
 align-items: center;
 display: flex;
 float:right;
 border: 1px solid blue;
 height: 100px;

}

.container img{
  width:80px;
  height:20px;
  border: 1px solid red;
}

<div class="container">
  <img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png?w=590&h=800&756A88D1-C0EA-4C21-92BE0BB43C14B265" />
</div>

Answer 2

You should probably use flexbox.

.container{
display: flex;
align-items: center;
}

Answer 3

use flexbox.

.container{
 float:right;
 border: 1px solid blue;
 height: 100px;
 display:flex;
 justify-content:center;
  align-items:center;

}

 img{
  width:80px;
  height:20px;
  
  border: 1px solid red;
}

<div class="container">
<img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png?w=590&h=800&756A88D1-C0EA-4C21-92BE0BB43C14B265" />
</div>

Answer 4

I Hope You want this output.

.container{
 float:right;
 border: 1px solid blue;
 height: 100px;

}

.container img{
  width:80px;
  height:inherit;
}

<div class="container">
<img src="https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png?w=590&h=800&756A88D1-C0EA-4C21-92BE0BB43C14B265" />
</div>