How to vertically align to the middle in CSS
index.html
<div class="container method-1">
<span>This is a description</span>
<img src="example.jpg" width="60">
</div>
<div class="container method-2">
<span>This is a description</span>
<img src="example.jpg" width="60">
</div>
<div class="container method-3">
<span>This is a description</span>
<img src="example.jpg" width="60">
</div>
<div class="container method-4">
<span>This is a description</span>
<img src="example.jpg" width="60">
</div>
<div class="container method-5">
<span>This is a description</span>
<img src="example.jpg" width="60">
</div>
<div class="container method-6">
<span>This is a description</span>
<img src="example.jpg" width="60">
</div>
<style>
.container {
background-color: rgb(0, 218, 218);
height: 50px;
margin-bottom: 5px;
}
.container.method-1 {
display: flex;
}
.container.method-1 span {
align-self: center;
}
.container.method-1 img {
align-self: center;
}
.container.method-2 span {
display: block;
padding-top: 16.165px;
}
.container.method-3 {
box-sizing: border-box;
padding-top: 16.165px;
}
.container.method-4 {
display: table;
width: 100%;
}
.container.method-4 span {
display: table-cell;
vertical-align: middle;
}
.container.method-5 img {
vertical-align: middle;
}
.container.method-5 span {
line-height: 50px;
vertical-align: middle;
}
.container.method-6 {
position: relative;
}
.container.method-6 span {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
