Bootstrap 3에서 완벽한 수직 텍스트 및 이미지 정렬을 달성하는 방법은 무엇입니까?

Twitter Bootstrap 3의 세로 텍스트 및 이미지 정렬

이 주제에 대한 문의가 많음에도 불구하고, Twitter Bootstrap에서 텍스트와 이미지의 세로 정렬을 달성했습니다. Twitter Bootstrap 3은 특히 크기가 다양한 동적 콘텐츠의 경우 파악하기 어려울 수 있습니다.

이 문제를 해결하려면 챌린지에서는 텍스트와 이미지가 상대 크기에 관계없이 수직으로 중앙에 배치되는 원하는 레이아웃을 설명하기 위해 Bootply 데모가 만들어졌습니다.

해결책은 float 대신에 display:inline-block을 사용하는 것입니다. 텍스트 및 이미지 열. 이를 통해 다음 CSS와 함께 수직 정렬:중간을 사용할 수 있습니다.

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

margin-right를 음수 값으로 설정하면 수직 정렬을 유지하면서 열이 나란히 배치되도록 할 수 있습니다. .

이 접근 방식을 테스트하려면 http://bootply.com/94402의 데모로 이동하세요. 여기서 텍스트와 이미지는 다양한 콘텐츠에 맞춰 수직으로 올바르게 중앙에 배치됩니다. 크기입니다.

위 내용은 Bootstrap 3에서 완벽한 수직 텍스트 및 이미지 정렬을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!