>source

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

    첨부 된 부트 스트랩 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>
    
    

관련 자료

  • 이전 JavaScript - 자바 스크립트 - 소수가있는 1부터 10까지의 부동 소수점 배열
  • 다음 swift : 스위프트 사전의 키와 값의 차이점