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- ...
随机推荐
- C# 中的 null
原文 C# 中的 null C# 允许将 null 值赋给任意引用变量(不能把 null 赋给一个值变量).值为 null 的变量表明该变量不引用内存中的任何对象. 如下所示: Circle c = ...
- Windbg源码调试
Windbg提供比VS2008丰富很多的调试命令,尤其是调试多线程程序. 今天试着怎么使用源代码方式调试.为了说明调试命令,<C++标准库>一书里的例子做示范. // testcast.c ...
- Python脚本控制的WebDriver 常用操作 <二十三> wait
测试用例场景 Wait类的使用场景是在页面上进行某些操作,然后页面上就会出现或隐藏一些元素,此时使用Wait类的until方法来等待这些效果完成以便进行后续的操作.另外页面加载时有可能会执行一些aja ...
- C# 发送邮件整理,包括控制台程序、WPF、WebForm 及 ASP.NET MVC
一直想把发送邮件的功能掌握,总是各种情况拖着了,这两天终于看了一下,整理一下,希望能帮到想学的. 发送邮件使用SMTP服务器,有两种方案,一种是使用IIS的SMTP功能:另一种是直接使用邮件供应商的S ...
- css 横向渐变 图片阴影效果 字体模糊效果
(必须加在Table的TD里,如果TD有背景就会遮盖阴影,可以把背景放到外套的表格里去) 背景颜色渐变 横向渐变 style="filter:progid:DXImageTransform. ...
- NOIP2012 Vigenère 密码
1.Vigenère 密码 (vigenere.cpp/c/pas) [问题描述] 16 世纪法国外交家 Blaise de Vigenère 设计了一种多表密码加密算法——Vigenère 密码.V ...
- 【暑假】[深入动态规划]UVa 10618 The Bookcase
UVa 12099 The Bookcase 题目: http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=42067 思路: ...
- 大数据架构师基础:hadoop家族,Cloudera产品系列等各种技术
大数据我们都知道hadoop,可是还会各种各样的技术进入我们的视野:Spark,Storm,impala,让我们都反映不过来.为了能够更好的架构大数据项目,这里整理一下,供技术人员,项目经理,架构师选 ...
- Java集合的小抄 Java初学者必备
在尽可能短的篇幅里,将所有集合与并发集合的特征,实现方式,性能捋一遍.适合所有”精通Java”其实还不那么自信的人阅读. 不断更新中,请尽量访问博客原文. List ArrayList 以数组实现.节 ...
- 问题-WIN7 ..\Bin\InitCC32.exe".进程无法访问(拒绝访问)
问题现象: 问题原因:是InitCC32.exe没有权限. 问题处理:在DELPHI7的安装目录里设置用户权限,加入EVE... 这个用户.