[英]Cannot vertical align center an image and text on the same line React Bootstrap
我试图在 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>
然而 output 如下所示:
我在这里做错了什么?
这是您在执行此操作的第一个div
中使用的附加到<p>
的 Bootstrap CSS。
访问 devtools 中的p
元素并注意它与 Bootstrap 的margin
:
p {
margin-top: 0;
margin-bottom: 1rem;
}
覆盖它,它应该工作。
您可以将它们放在一个元素中并像这样使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.