Bootstrap의 수직 및 수평 센터링에 대한 간략한 설명

이 글에서는 Bootstrap3 및 Bootstrap4의 수직 및 수평 센터링을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

추천 관련 튜토리얼: "bootstrap tutorial"

Bootstrap 수평 중앙 정렬

// 文本：

class ="text-center"

// 图片居中：

class = "center-block"

//其他元素：

//bootstrap3水平居中：利用bootstrap列偏移

class = "col-md-offset-4 col-lg-offset-4col-xl-offset-4"

// bootstrap4水平居中：

class = "m-auto"

Bootstrap 수직 중앙

bootstrap3 div 수직 중앙 정렬 방법:

Bootstrap의 그리드 시스템은 float를 사용합니다. left 메소드의 경우 수직 정렬 속성이 작동하지 않으므로 내부 div의 부동 속성을 지우고 다음과 같이 표시 속성을 추가합니다.

.middle {

   float: none;

   display: inline-block;

   vertical-align: middle;

}

Bootstrap3 로그인 상자 적응형 수평 센터링 + 수직 센터링

https://blog .csdn.net/shenzhen_zsw/article/details/75331515

Bootstrap4 div를 세로로 가운데에 배치하는 방법:

요소의 높이를 설정합니다

.login-center {

 height: 100vh;

}

.align-items-center를 적용하여 요소를 세로로 가운데에 배치합니다.

<div class="row align-items-centerjustify-content-center login-center">
 
…
 
</div>

Apply . justify. -content-center는 요소를 수평으로 중앙에 배치할 수 있습니다:

효과:

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !

위 내용은 Bootstrap의 수직 및 수평 센터링에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!