Невозможно выровнять по вертикали изображение и текст в одной строке React Bootstrap

#javascript #css #reactjs #twitter-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>

Однако результат выглядит следующим образом:

Что я здесь делаю не так?

1. verticalAlign: 'center' не требуется.

2. Если я удалю это, результат будет тот же. По-прежнему не центрируется по вертикали.

3. Возможно, img получает некоторые поля. @Kex

4. Я попытался установить 0 полей и отступов на изображении, и ничего не изменилось.

5. Вы можете попробовать установить меньшую ширину для img

Ответ №1:

Это Bootstrap CSS, прикрепленный к <p> тому, который вы используете внутри первого div , который делает это.

Посетите p элемент в devtools и обратите margin внимание, что он имеет из Bootstrap:

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

Переопределите это, и это должно сработать.

Пример песочницы

Ответ №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>