我一直在弄乱一堆代码，这些代码拒绝在我的左右浮动的DIV中居中。对于我的左边，一个跨度和一个图像被卡在左下角，而在右边，正常的文本被卡在右上角。

这是它目前的样子。

至于我的代码，在这里。如果我能得到帮助，我可以做些什么来修复它，我会感激它。

HTML：

<代码><；DIV类="；页眉"；>；<；DIV类="；所有选择器"；>；<；！--<；span（click）="；showall（）"；>；<；IMG SRC={{imgsource}}/>；{{ExpandContractStatement}}<；/span>；-->；<；IMG SRC={{imgsource}}（click）="；showAll（）"；/>；<；span（click）="；showAll（）类="；selectorinsides"；>；{{ExpandContractStatement}}<；/span>；<；/DIV>；<；DIV类="；图例"；>；事件任务CRS问题<；/DIV>；<；/DIV>；

CSS：

<代码>.标题{背景颜色：灰色；颜色：黑色；字体大小：24pt；行高：24pt；高度：6%；最大高度：6%；溢出：隐藏；垂直对齐：中间；}.所有选择器{宽度：50%；最大高度：100%；高度：100%；浮动：左；}.selectorinsides{/*因为之前的一些问题而抛出了这个*/溢出：隐藏；}.AllSelector>；IMG{高度：80%；对象匹配：包含；}.图例{行高：24pt；最大高度：100%；高度：100%；宽度：50%；浮子：右；保证金：0；文本对齐：右；垂直对齐：中间；}

顺晟科技：

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

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

.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;
}

<代码><；DIV类=“标题”>；<；DIV类=“ AllSelector ”>；<；！--<；span（click）=“ showall（）”>；<；IMG SRC={{imgsource}}/>；{{ExpandContractStatement}}<；/span>；-->；<；IMG SRC=“ https：//via.placeholder.com/32 ”（单击）=“ showall（）”/>；<；span（单击）=“ showall（）” Class=“ selectorinsides ”>；全部展开<；/span>；<；/DIV>；<；DIV类=“图例”>；突发事件任务CRS问题<；/DIV>；<；/DIV>；