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- ...
随机推荐
- java类加载器学习2——自定义类加载器和父类委托机制带来的问题
一.自定义类加载器的一般步骤 Java的类加载器自从JDK1.2开始便引入了一条机制叫做父类委托机制.一个类需要被加载的时候,JVM先会调用他的父类加载器进行加载,父类调用父类的父类,一直到顶级类加载 ...
- 【译】 AWK教程指南 8处理多行数据
awk 每次从数据文件中只读取一行数据进行处理.awk是依照其内置变量 RS(Record Separator) 的定义将文件中的数据分隔成一行一行的Record.RS 的默认值是 "\n& ...
- Her and his blog
Tonight, I read localhost8080 and some of her husband m67's blog. I found they are so geek and reall ...
- 2016"百度之星" - 初赛(Astar Round2B) 1006 中位数计数
思路:统计当前数左边比它小|大 i个人,相应右边就应该是比它大|小i个人 l数组表示左边i个人的方案 r表示右边i个人的方案 数组下标不可能是负数所以要加n //#pragma comment(lin ...
- PHP与MySQL动态网站开发1
PHP内嵌在HTML中,置于 <?php ?> 标签内 一般php文件扩展名.php 在body结算标签之前 对于远程服务器,可以用ftp工具传程序 打印语句 echo'Hello Wor ...
- HTML-css selector
Css selector 基本有三种 HTML(TAG)selector , ID selector , Class selector css selector 综合使用 : 重用,子选择器,组选择器 ...
- 与IO相关的等待事件troubleshooting-系列9
Buffer Cache与IO相关的等待事件: 这种等待事件的产生原因是包含DBWR进程和IO Slaves的Buffer Cache操作. 'db file parallel write' , 'd ...
- 获取客户端Ip地址方法
public static string GetIp() { string ip; HttpRequest request = HttpContext.Current.Request; if (req ...
- 【Stage3D学习笔记续】山寨Starling(一):从事件说起
我在GitHub上新开了一个项目:https://github.com/hammerc/hammerc-study-Stage3D 山寨的Starling版本我取名叫做Scorpio2D,以后的笔记中 ...
- selenium 自动化测试面试题及答案
写在开始: 这些问题和答案,都是自己在网上找的,整理的,有任何问题,概不负责.主要感谢博主Ray,http://www.cnblogs.com/tsbc/p/4922368.html 1.seleni ...