Bootstrap 3에서 텍스트와 이미지를 세로 중앙에 어떻게 배치할 수 있나요?

Twitter Bootstrap 3의 텍스트 및 이미지 세로 중심 맞추기(중복)

Twitter Bootstrap 3의 텍스트 및 이미지 세로 정렬에 관해 많은 문의가 접수되었습니다. Twitter Bootstrap 3. 이 주제에 대해서는 추가 논의가 필요합니다.

동적으로 Bootstrap 3을 사용하는 경우 콘텐츠의 경우 시각적 요소의 정확한 크기를 결정하는 것이 어려울 수 있습니다. 또한 레이아웃은 반응성을 유지해야 합니다.

텍스트와 이미지를 모두 세로 중앙에 배치하려면 다른 접근 방식을 사용하는 것이 좋습니다. 요소를 부동화하는 대신 해당 표시를 인라인 블록으로 설정하십시오. 또한 수직 정렬:중간을 활용하여 적절한 수직 정렬을 보장합니다.

다음은 이 기술을 보여주는 CSS 스니펫의 예입니다.

.col-lg-4, .col-lg-8 {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: -4px;
}

이러한 조정을 구현하면 쉽게 중앙에 배치할 수 있습니다. 콘텐츠 크기를 알 수 없는 경우에도 반응형 방식으로 텍스트와 이미지를 수직으로 표시합니다.

실시간 데모를 보려면 다음 Bootply를 참조하세요. 링크:

http://bootply.com/94402

위 내용은 Bootstrap 3에서 텍스트와 이미지를 세로 중앙에 어떻게 배치할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!