[bootstrap]bootstrap2如何引导div垂直居中
参考网址:http://www.4byte.cn/question/138712/bootstrap-how-to-center-vertical.html
部分参考自上面网页中的方法.用过bootstrap的同学知道,bootsrap2中可以使用栅格布局让div水平居中,那么如何让水平居中的div又垂直居中呢?
<div class="container">
<div class="row">
<div class="span4 offset4" style="padding:5 20 5 20;">
Some text text text text text .....
</div>
</div>
</div>
直接在css里面设置就可以实现居中,css代码:
/*web background*/
.container{
display:table;
height:100%;
} .row{
display: table-cell;
vertical-align: middle;
}
这样就实现了div的水平加垂直剧中了,完毕!
[bootstrap]bootstrap2如何引导div垂直居中的更多相关文章
- div垂直居中的几种方法
CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...
- div垂直居中 css div盒子上下垂直居中
div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...
- div垂直居中的问题
工作和面试时常常会遇到怎么设置div垂直居中与浏览器中:包括固定宽高和不固定宽高的 1.固定宽高的div垂直居中 宽高固定的div很容易设置让其垂直居中 <div class="cen ...
- 由12306出错想到的div垂直居中的问题
今天想看看元旦回家还有没有余票,偷偷的打开了12306,开始查询回家的车票,结果发现,竟然查询不出来,再查直接出错了 看到这个很郁闷,很纠结,但是突然想到了最近一直想实现div垂直居中,赶紧试了一下1 ...
- css的div垂直居中的方法,百分比div垂直居中
前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...
- css中固定宽高div与不固定宽高div垂直居中的处理办法
固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...
- CSS——div垂直居中及div内文字垂直居中
最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...
- css 文本和div垂直居中方法汇总
https://blog.csdn.net/u014607184/article/details/51820508 https://blog.csdn.net/liuying1802028915/ar ...
- 纯css使div垂直居中,div垂直,div居中的方法
首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...
随机推荐
- SQL高性能查询优化语句(总结)
SQL 高性能查询优化语句,一些经验总结 1.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引而进行全表扫描,如:select id from t where ...
- MySQL 5.7 create VIEW or FUNCTION or PROCEDURE
1.视图 a. CREATE ALGORITHM = UNDEFINED DEFINER = `root`@`localhost` SQL SECURITY INVOKER VIEW `sakila` ...
- uct框架数据库sql文件导入错误之 sql_mode
uct框架在导入sql文件时可能会出现一种错误 ERROR 1101 (42000): BLOB/TEXT column 'brief' can't have a default value 这是由于 ...
- windows 下使用Nginx替代apache作为服务器
说实话, 在windows下使用Nginx 着实有点不太方便, 但因项目需求, 又不想换系统(虽然可以搞个虚拟机玩), 只能用Nginx了 好了, 不多说了. 开始... 首先我用的是xampp包(A ...
- a标签 不触发 目标链接
1. a 标签 点击时 页面回调转到href制定的页面 <a href="www.baidu.com">go to baidu</a> 2. 加上oncli ...
- 解决Visual C++ Redistributable for Visual Studio 2015的安装问题
1. Visual C++ Redistributable for Visual Studio 2015系统要求:Windows 7情况下必须是Windows 7 with SP1.或者Windows ...
- jQuery元宵猜灯谜特效(元宵十五日猜一个字)
在线体验:http://keleyi.com/keleyi/phtml/jqtexiao/35.htm jQuery元宵猜灯谜特效的HTML代码如下: <!DOCTYPE html> &l ...
- jQuery构造函数init参数分析(一)
在我的上一篇随笔里面分析了jQuery的构造函数,jQuery对象中有一个原型方法init才是是真正的构造函数,通过init的原型对象跟jQuery的原型对象保持引用关系使得init的实例可以正常调用 ...
- javascript 实现一个回文数字
写一个方法,让"1234"变成回文数字“1234321”,就是顺着读和倒着读都是一样的:注:不让用reverse()方法: function palindrome(str){ va ...
- iOS笔记之NSSet
一.简介 NSSet到底什么类型,其实它和NSArray功能性质一样,用于存储对象,属于集合: NSSet , NSMutableSet类声明编程接口对象,无序的集合,在内存中存储方式是不连续的, ...