BootStrap Div居中
阿新 • • 發佈：2019-02-10
使用BootStrap，如果一個Div只佔用了一小部分，怎麼居中呢？
給Div新增這樣一個Style就可以實現：<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>BootStrap3.3.2測試</title> <link href="../bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="../Jquery/jquery-1.11.2.min.js"></script> <script src="../bootstrap/3.3.2/js/bootstrap.min.js"></script> <style> .col-center-block { float: none; display: block; margin-left: auto; margin-right: auto; } </style> </head> <body> <div class="container"> <div class="row myCenter"> <div class="col-xs-6 col-md-4 col-center-block"> <form class="form-signin"> <h2 class="form-signin-heading">請登入</h2> <label for="username" class="sr-only">使用者名稱</label> <input type="text" id="username" class="form-control" placeholder="使用者名稱" required autofocus> <label for="inputPassword" class="sr-only">密碼</label> <input type="password" id="inputPassword" class="form-control" placeholder="密碼" required> <div class="checkbox"> <label> <input type="checkbox" value="remember-me"> 記住我 </label> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">登入</button> </form> </div> </div> </div> </body> </html>
<style>
.col-center-block {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>