HTML/CSS - Dealing With Contents That Refuse To Vertically Center - html

Question

I've been messing with a bunch of code that refuses to center within my divs that are floated left and right. For my left one, a span and an image are stuck in the bottom left, while on the right, normal text is stuck on the top-right.
Here's what it currently looks like.
As for my code, here it is. If I can get help on what I could maybe do to fix it, I'd appreicate it.
HTML:
<div class="header">
<div class="allSelector">
<!-- <span (click)="showAll()"><img src={{imgSource}} /> {{expandContractStatement}}</span> -->
<img src={{imgSource}} (click)="showAll()"/><span (click)="showAll()" class="selectorInsides">{{expandContractStatement}}</span>
</div>
<div class="legend">
Incidents
Tasks
CRs
Problems
</div>
</div>
CSS:
.header {
background-color: gray;
color:black;
font-size: 24pt;
line-height: 24pt;
height: 6%;
max-height: 6%;
overflow: hidden;
vertical-align: middle;
}
.allSelector {
width: 50%;
max-height: 100%;
height: 100%;
float: left;}
.selectorInsides { /*Threw this in because of some issues before*/
overflow: hidden;
}
.allSelector > img {
height: 80%;
object-fit: contain;
}
.legend {
line-height: 24pt;
max-height: 100%;
height: 100%;
width: 50%;
float: right;
margin: 0;
text-align: right;
vertical-align: middle;
}

Answer 1

It's hard to tell if this answer is sufficient since a minimal, reproducible example wasn't provided, but you use Flexbox to vertically align elements.
/* Vertically align elements */
.header,
.allSelector,
.legend {
display: flex;
align-items: center;
}
.selectorInsides {
/* Adjust the spacing between image and text as needed */
margin-left: 8pt;
}
/* Vertically align elements */
.header,
.allSelector,
.legend {
display: flex;
align-items: center;
}
.header {
background-color: gray;
color: black;
font-size: 24pt;
line-height: 24pt;
height: 6%;
max-height: 6%;
overflow: hidden;
vertical-align: middle;
}
.allSelector {
width: 50%;
max-height: 100%;
height: 100%;
float: left;
}
.selectorInsides {
/*Threw this in because of some issues before*/
overflow: hidden;
/* Adjust the spacing between image and text as needed */
margin-left: 8pt;
}
.allSelector>img {
height: 80%;
object-fit: contain;
}
.legend {
line-height: 24pt;
max-height: 100%;
height: 100%;
width: 50%;
float: right;
margin: 0;
text-align: right;
vertical-align: middle;
}
<div class="header">
<div class="allSelector">
<!-- <span (click)="showAll()"><img src={{imgSource}} /> {{expandContractStatement}}</span> -->
<img src="https://via.placeholder.com/32" (click)="showAll()" /><span (click)="showAll()" class="selectorInsides">Expand All</span>
</div>
<div class="legend">
Incidents Tasks CRs Problems
</div>
</div>