HTML/CSS -处理拒绝垂直居中的内容

Question

我一直在搞一堆代码，拒绝居中在我的div浮动左右。在我的左图中，span和图片位于左下方，而在右图中，普通文本位于右上方。

这是它当前的样子。

我的代码，在这里。如果我能得到帮助，我可以做些什么来解决它，我会很感激的。

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

很难判断这个答案是否足够，因为没有提供最小的、可重复的示例，但是您可以使用flexx来垂直对齐元素。

/* 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>