Twitter Bootstrap 3에서 콘텐츠를 세로 중앙에 어떻게 배치할 수 있나요?

Twitter Bootstrap 3에서 콘텐츠를 수직 중앙에 배치

많은 사용자가 Twitter Bootstrap 3에서 텍스트와 이미지를 수직 중앙에 배치하는 데 어려움을 겪었습니다. 이 문서에서는 다음을 제공합니다. 반응형 및 동적 콘텐츠를 활용하는 솔루션입니다.

한 가지 접근 방식은 float 대신 display:inline-block 속성을 ​​사용하세요. 이를 통해 다양한 화면 크기에 반응하는 기능을 유지하면서 콘텐츠를 수직으로 정렬할 수 있습니다. vertical-align:middle을 통합하면 텍스트와 이미지가 모두 수직으로 중앙에 배치됩니다.

이 솔루션을 구현하려면 다음 CSS를 추가하기만 하면 됩니다.

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

이것은 상대적인 크기에 관계없이 텍스트와 이미지를 모두 중앙에 배치합니다.

작업 데모는 다음에서 볼 수 있습니다. http://bootply.com/94402, 수직 정렬을 유지하면서 콘텐츠가 화면 해상도 변화에 어떻게 동적으로 반응하는지 보여줍니다.

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