BootStrap Div居中

来源：互联网发布：微信群自动群发软件编辑：程序博客网时间：2024/05/22 10:21

使用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>

最终效果如下：

0 3