Bootstrap 3에서 콘텐츠를 수직 중앙에 배치하는 방법은 무엇입니까?

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

Bootstrap 3에서 동적 콘텐츠로 작업할 때 일반적인 과제는 텍스트와 이미지를 모두 수직 중앙에 배치하는 것입니다. , 특히 크기가 다를 수 있는 경우. 응답성이 뛰어나고 수직으로 중앙에 배치된 레이아웃을 구현하는 방법은 다음과 같습니다.

해결책:

기존 부동 소수점 속성을 사용하는 대신 display:inline-block을 선택하고 수직을 적용하세요. -align:다음을 사용하여 관련 요소를 중간에 정렬합니다. CSS:

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

설명:

• display:inline-block을 사용하면 높이와 너비를 적용하는 기능을 유지하면서 요소를 나란히 배치할 수 있습니다.
• vertical-align:middle은 요소의 수직 중앙을 중앙에 정렬합니다. parent.
• 음수 margin-right는 요소 사이의 간격을 조정하여 보다 세련된 레이아웃을 제공합니다.

데모:

라이브용 데모, 방문: http://bootply.com/94402

이 솔루션은 텍스트와 이미지가 모두 수직으로 정렬되도록 보장합니다. 크기가 동적으로 변경되더라도 각 열의 중앙에 배치되어 반응성이 뛰어나고 시각적으로 매력적인 레이아웃을 제공합니다.

위 내용은 Bootstrap 3에서 콘텐츠를 수직 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!