使用BootStrap,如果一个Div只占用了一小部分,怎么居中呢?
<!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>给Div添加这样一个Style就可以实现:
<style> .col-center-block { float: none; display: block; margin-left: auto; margin-right: auto; } </style>最终效果如下:
原文地址:http://blog.csdn.net/fanxl10/article/details/44037811