Bootstrap3 與Bootstrap4垂直水平居中


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的浮動方式,vertical-align屬性不起作用,故把內部div的float屬性清除,添加display屬性,如下:

.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可以使元素垂直居中:

<divclass="row align-items-centerjustify-content-center login-center">



</div>
應用. justify-content-center可以使元素水平居中:
————————————————

原文鏈接:https://blog.csdn.net/xif3681/article/details/80899918


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM