부트스트랩에서 이미지를 중앙에 배치하는 방법

부트스트랩을 사용하여 콘텐츠를 레이아웃할 때 때로는 사진을 콘텐츠 중앙에 가로로 표시해야 할 때가 있습니다.

일반적으로 우리 이미지는 모두 .img-response 클래스를 사용하여 이미지 반응성을 달성합니다. (권장 학습: Bootstrap 비디오 튜토리얼 )

반응형 이미지의 수평 중앙 정렬을 구현하려면 . center-block 클래스, .text-center를 사용하지 마세요

반응형 이미지의 수평 중앙 정렬을 구현하려면 .center-block 클래스를 사용하세요:

<p><img class="img-responsive center-block" src="..." /></p>

#🎜 🎜#참고: # 🎜🎜#.center-block 수업 배치 위치. 태그에 배치해야 합니다. 외부 레이어에 배치하면 센터링이 불가능합니다. 예를 들어 아래 코드는 이미지를 중앙에 배치할 수 없습니다.

<div class="center-block"><img class="img-responsive" src="..." /></div>

이미지에 반응형 클래스 .img-반응형이 추가되지 않은 경우 .text-center를 사용하여 이미지를 중앙에 배치할 수도 있습니다

: # 🎜 🎜#

<p class="text-center"><img src="..."></p>

Bootstrap과 관련된 더 많은 기술 기사를 보려면
Bootstrap Tutorial

열을 방문하여 알아보세요!

위 내용은 부트스트랩에서 이미지를 중앙에 배치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!