BootStrap Div居中

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

最终效果如下：

BootStrap Div居中相关推荐

bootstrap之div居中
bootstrap之div居中偏移列偏移是一个用于更专业的布局的有用功能.它们可用来给列腾出更多的空间.例如,.col-xs=* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果 ...
CSS | bootstrap 和 tailwind 中如何让 div 居中
1 概述前端工程师都有过这样的痛苦经历,如何让 div 元素居中,所以我决定分享这个教程. 2 使用 absolute 2.1 tailwind <div class="relati ...
bootstrap 图片居中,bootstrap如何设置居中
该方法适用于所有品牌的电脑. Bootstrap 元素居中设置一.Bootstrap水平居中 1. 文本:class ="text-center" 2. 图片居中:class = ...
CSS中怎么让DIV居中
CSS 如何使DIV层水平居中今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...
设置div中的div居中显示
设置div中的div居中显示方法一. <div class='big'><div class='small'>box1</div></div>styl ...
HTML4如何让一个DIV居中对齐？float输入日志标题
float:left,right clear:both 如何让一个DIV居中对齐? 第一步:设置外层的DIV的text-align:center; 第二步:设置里层的DIV的margin:auto 以 ...
html文章整体居中,div居中与div内容居中
div css构造时,常见到div 居中与div内容居中,即div自身水平居中与div内的形式居中结构. 而模式居中又分为垂直居中与程度居中,这里CSS5将一一让各人把握这几个居中构造本事. 对付di ...
div居中边框设置文字行高设置
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
[css] 怎样把一个div居中？怎样把一个浮动元素居中？怎样把绝对定位的div居中？
[css] 怎样把一个div居中?怎样把一个浮动元素居中?怎样把绝对定位的div居中? 主要用到:text-alin: center;margin: 0 auto;position: relative ...

BootStrap Div居中

BootStrap Div居中相关推荐

最新文章

热门文章