How to center a div in bootstrap3
There are two approaches to centering a column <div>
in Bootstrap 3:
Approach 1 (offsets):
The first approach uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5, that's (12-2)/2
.
In markup this would look like:
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
Now, there's an obvious drawback for this method, it only works for even column sizes, so only .col-X-2
, .col-X-4
, col-X-6
, col-X-8
and col-X-10
are supported.
Approach 2 (the old margin:auto)
You can center any column size by using the proven margin: 0 auto;
technique, you just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:
.col-centered{
float: none;
margin: 0 auto;
}
Now you can add it to any column size at any screen size and it will work seamlessly with Bootstrap's responsive layout :
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Note: With both techniques you could skip the .row
element and have the column centered inside a .container
but you would notice a minimal difference in the actual column size because of the padding in the container class.
Update:
Since v3.0.1 Bootstrap has a built-in class named center-block
that uses margin: 0 auto
but is missing float:none
. You can add that to your CSS to make it work with the grid system.
How to center a div in bootstrap3的更多相关文章
- CSS布局之div交叉排布与底部对齐--flex实现
最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方 ...
- 水平垂直居中div(css3)
一.在需要居中的元素加上如下C3属性即可: <!doctype html><html lang="en"><head> <meta cha ...
- 用div和css样式控制页面布局
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- DIV CSS 网页兼容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌)
CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middl ...
- div img居中的方式
想让div中的img水平和垂直都居中,可以将img放在div中,img的样式:height:100%;width:100%; 外部定义div的宽度和高度,然后定义line-height行高,div外部 ...
- HTML CSS + DIV实现局部布局
HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...
- js 弹出div窗口 可移动 可关闭 (转)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- DIV 布局 左中右
<style type="text/css">body{ margin:0; padding:0;}.Header{ height:100px; background: ...
- 转载:DIV+CSS有可能遇到的问题
[总结]DIV+CSS有可能遇到的问题 一.超链接访问过后hover样式就不出现的问题? 被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H- ...
随机推荐
- Javascript 对输入框中的内容进行 “全选/反选”
<</span>script> document.write("<</span>ul>"); for(var i=0;i<&l ...
- [Tommas] 测试用例覆盖率(一)
一.测试用例的切面设计 所谓测试切面设计,其实就是测试用例大项的划分.测试用例划分的经典方法是瀑布模型,也就是从上到下,逐渐细分,大模块包括小模块,小模块包括更小的模块.但仅仅如此是不够的,我们还要从 ...
- Eclipse导入的工程后referenced libraries中的jar包中文注释显示乱码解决方法
Preferences-General-Workspace-Text file encoding 设置为uft-8 最后重启一下eclipse.
- Mongo DB 安装-及分布式集群部署(初稿)
一.安装步骤, 1, 下载最新的Mongo DB数据库:http://www.mongodb.org/downloads?_ga=1.44426535.2020731121.1421844747\ 下 ...
- Leetcode OJ : Evaluate Reverse Polish Notation Stack C++ solution
#define ADDITION '+' #define SUBSTRACTION '-' #define MULTIPLICATION '*' #define DIVISION '/' class ...
- uva 2218 Triathlon
题意:铁人三项赛,给定每个选手游泳,自行车,赛跑三个阶段的平均速度,不知道每段比赛的路程,询问当前这个选手能否胜利. 思路:把题意转化为一个不等式,设比赛长度是1,如果i要战胜j,x.y分别是第一阶段 ...
- 安装mysql-5.7.9-winx64
1.mysql-5.7.9-winx64.zip下载 官方网站下载地址:http://dev.mysql.com/downloads/mysql/5.7.html 2.解压到D:\MySqlDataB ...
- HDU-2262 Where is the canteen 概率DP,高斯消元
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2262 题意:LL在一个迷宫里面转,每次走向周围能走的点的概率都是一样的,现在LL要随机的走到cante ...
- Turn Your Raspberry Pi Into a WiFi Hotspot with Edimax Nano USB EW-7811Un (RTL8188CUS chipset)
http://www.daveconroy.com/turn-your-raspberry-pi-into-a-wifi-hotspot-with-edimax-nano-usb-ew-7811un- ...
- hdoj 1213 How Many Tables
How Many Tables Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...