Javascript 无法将同一行上的图像和文本垂直居中对齐

我试图在React Bootstrap中将图像和文本垂直对齐到同一行：

<CardBody 
    className="d-flex justify-content-between align-items-center" 
    style={{borderTop: "1px solid #6c757d", paddingTop: "1rem"}}
>
    <div>
        <p className="text-muted p-0" style={{backgroundColor: 'red'}}>{subtitle}</p>
    </div>
    <img
        
        src={infoIcon}
        alt="Info"
        style={{width: 20, backgroundColor: 'red', verticalAlign: 'center'}}
    />
</CardBody>

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

{subtitle}

但是，输出如下所示：

---

我做错了什么？

您可以将它们放在一个元素中并使用flex，如：

{subtitle}

---

这是附加到

的引导CSS，您在第一个

div

中使用它来执行此操作

访问devtools中的

p

元素，注意它在引导中的

margin

：

<CardBody 
    className="d-flex justify-content-between align-items-center" 
    style={{borderTop: "1px solid #6c757d", paddingTop: "1rem"}}
>
    <div>
        <p className="text-muted p-0" style={{backgroundColor: 'red'}}>{subtitle}</p>
    </div>
    <img
        
        src={infoIcon}
        alt="Info"
        style={{width: 20, backgroundColor: 'red', verticalAlign: 'center'}}
    />
</CardBody>

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

覆盖它，它应该会工作

---

垂直对齐：不需要“中心”

。如果删除此选项，结果相同。仍然没有垂直居中。可能是img可能获得了一些利润@KexI尝试在图像上设置0边距和填充，但没有任何更改。您可以尝试在图像上设置较小的宽度。结果相同。项目未正确垂直居中。