无法在同一行上垂直对齐图像和文本的中心 React Bootstrap答案

【问题标题】：Cannot vertical align center an image and text on the same line React Bootstrap无法在同一行上垂直对齐图像和文本的中心 React Bootstrap
【发布时间】：2020-11-11 04:57:53
【问题描述】：

我正在尝试在 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>

但是输出如下：

我在这里做错了什么？

【问题讨论】：

verticalAlign: 'center' 不是必需的。
如果我删除它，结果是一样的。仍然没有垂直居中。
这可能是 img 可能会获得一些利润。 @Kex
我尝试在图像上设置 0 边距和内边距，但没有任何改变。
您可以尝试为img设置一些较小的宽度

标签： javascript css reactjs twitter-bootstrap

【解决方案1】：

这是您在第一个 div 中使用的附加到 <p> 的 Bootstrap CSS。

访问 devtools 中的 p 元素并注意它在 Bootstrap 中的 margin：

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

覆盖它，它应该可以工作。

Example sandbox

【讨论】：

【解决方案2】：

你可以把它们放在一个元素中，然后像这样使用 flex：

<div style={{display: 'flex', justifyContent: 'center', alignItem: 'center'}}>
<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'}}
    />
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：

结果是一样的。项目未正确垂直居中。