无法在同一行 React Bootstrap 上垂直居中对齐图像和文本

Question

I am trying to align an image and text vertically on the same line in 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>

However the output is like follows:

What am I doing wrong here?

Answer 1

It's the Bootstrap CSS attached to <p> that you are using inside the first div that's doing this.

Visit the p element in devtools and notice the margin it has from Bootstrap:

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

Override that and it should work.

Example sandbox

Answer 2

you can put them in an element and use flex like:

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