参考网址: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垂直居中的更多相关文章

  1. div垂直居中的几种方法

    CSS教程:div垂直居中的N种方法[转](原文地址:http://www.cnblogs.com/chuncn/archive/2008/10/09/1307321.html) 在说到这个问题的时候 ...

  2. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  3. div垂直居中的问题

    工作和面试时常常会遇到怎么设置div垂直居中与浏览器中:包括固定宽高和不固定宽高的 1.固定宽高的div垂直居中 宽高固定的div很容易设置让其垂直居中 <div class="cen ...

  4. 由12306出错想到的div垂直居中的问题

    今天想看看元旦回家还有没有余票,偷偷的打开了12306,开始查询回家的车票,结果发现,竟然查询不出来,再查直接出错了 看到这个很郁闷,很纠结,但是突然想到了最近一直想实现div垂直居中,赶紧试了一下1 ...

  5. css的div垂直居中的方法,百分比div垂直居中

    前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...

  6. css中固定宽高div与不固定宽高div垂直居中的处理办法

    固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...

  7. CSS——div垂直居中及div内文字垂直居中

    最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...

  8. css 文本和div垂直居中方法汇总

    https://blog.csdn.net/u014607184/article/details/51820508 https://blog.csdn.net/liuying1802028915/ar ...

  9. 纯css使div垂直居中,div垂直,div居中的方法

    首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...

随机推荐

  1. Effective java笔记(五),枚举和注解

    30.用enum代替int常量 枚举类型是指由一组固定的常量组成合法值的类型.在java没有引入枚举类型前,表示枚举类型的常用方法是声明一组不同的int常量,每个类型成员一个常量,这种方法称作int枚 ...

  2. sns社区架构设计案例分享

    今天看了个社区,了解了一下该产品的架构设计,做一下分享. 内容来源:http://www.jinhusns.com/Document/FrameworkDocument/?type=cc 一. 架构使 ...

  3. IOS学习笔记之获取Plist文件读取数据

    @property(nonatomic,strong) NSArray *pic; //创建数组属性 @property(nonatomic,assign) int index; //创建索引属性 @ ...

  4. php xml 文件读取 XMLReader

    php xml 文件读取 <?php /** $xmlString = '<xml> <persons count="10"> <person ...

  5. Eclipse切换SVN用户

    1. 点击windows --> preference --> Team --> SVN,查看当前的SVN接口. 2. 如果SVN接口是JavaHL,那么找到C:\Documents ...

  6. 编程模式之模板方法模式(Template Method)

    模板方法模式由两个角色组成:父类角色,子类角色. 父类角色:提供模板. 子类角色:为父类模板提供实现. 类图: JAVA代码: AbstractClass.java package com.templ ...

  7. 第 31 章 项目实战-PC 端固定布局[4]

    学习要点: 1.热门旅游区 2.标题介绍区 3.旅游项目区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一.热门 ...

  8. 【转】Cookie和Session区别和联系详解

    会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...

  9. 解决eclipse配置Tomcat时找不到server选项(Mac通用)

    集成Eclipse和Tomcat时找不到server选项: 按照网上的步骤如下: 在Eclipse中,窗口(window)——首选项(preferences)——服务器(Server)——运行时环境( ...

  10. JS 预解释相关理解

    1.JS中的内存空间分为两种:栈内存.堆内存 栈内存:提供JS代码执行的环境;存储基本数据类型的值; ->全局作用域或者私有的作用域其实都是栈内存 堆内存:存储引用数据类型的值(对象是把属性名和 ...