Home >Web Front-end >Bootstrap Tutorial >A brief discussion on vertical and horizontal centering in Bootstrap

A brief discussion on vertical and horizontal centering in Bootstrap

青灯夜游
青灯夜游forward
2021-01-04 17:34:5910757browse

This article will introduce to you the vertical and horizontal centering of Bootstrap3 and Bootstrap4. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

A brief discussion on vertical and horizontal centering in Bootstrap

Related tutorial recommendations: "bootstrap tutorial"

Bootstrap horizontally centered

// 文本:

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 vertical centering

bootstrap3 How to vertically center the inside of a div:

Bootstrap’s grid system uses the floating method of float:left, and the vertical-align attribute does not It works, so clear the float attribute of the internal div and add the display attribute, as follows:

.middle {

   float: none;

   display: inline-block;

   vertical-align: middle;

}

Bootstrap3 login box adaptive horizontal centering and vertical centering

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

Bootstrap4 How to center the div vertically:

Set the height of the element

.login-center {

 height: 100vh;

}

Apply .align-items-center to vertically center the element :

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

Application. justify-content-center can center the element horizontally:

Effect:

More programming related knowledge, Please visit: Programming Teaching! !

The above is the detailed content of A brief discussion on vertical and horizontal centering in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete