参考网址: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. 在IIS7.5中ASP.NET调用cmd程序拒绝访问决绝方法小记

    前言 昨天利用Github的Webhook实现自动部署站点,其中要调用命令行(cmd.exe)程序执行shell脚本. 在本地测试没有任何问题,部署到服务器之后,发现错误信息:访问拒绝. 问题 没有权 ...

  2. B/S工作原理

    B/S疑问 先对比C/S,在C/S中我们开发时怎么做的,是不是这样:拖控件,写方法,所有的功能基本就是这样,就像我们的机房收费系统,C/S学习完之后,我们开始B/S学习,这里我们接触的是ASP.NET ...

  3. C#模拟Http请求时出现 基础连接已经关闭 未能为 SSLTLS 安全通道建立信任关系

    //解决方法: //引入命名空间: using System.Security.Cryptography.X509Certificates; using System.Net.Security; // ...

  4. 速战速决 (4) - PHP: 类基础, 抽象类, 接口, trait

    [源码下载] 速战速决 (4) - PHP: 类基础, 抽象类, 接口, trait 作者:webabcd 介绍速战速决 之 PHP 类基础 抽象类 接口 trait 示例1.类的相关知识点 1(基础 ...

  5. Oracle取消用户连续登录失败次数限制

    当用户连续登录失败次数过多时,Oracle会锁定该用户,“FAILED_LOGIN_ATTEMPTS”用于设置最大次数,超过该值则锁定该帐号. 要取消用户连续登录失败次数的限制可以按照以下方法操作: ...

  6. Guava学习-目录

    备份一下地址: 目录 1. 基本工具 [Basic utilities] 让使用Java语言变得更舒适 1.1 使用和避免null:null是模棱两可的,会引起令人困惑的错误,有些时候它让人很不舒服. ...

  7. spice server dpkg-buildpackage 打包编译备忘

    一般我们会通过configure,make 编译.但是为了替换版本的方便需要把他编译成deb的包,而且还需要自定义下包名.下面就记录下我的修改过程. 注:前面关于spice server的编译过程掠过 ...

  8. MongoDB索引

    1.目的 索引就是用来加速查询的.数据库索引与书籍的索引类似:有了索引就不需要翻遍整本书,数据库则可以直接在索引中查找,使得查找速度能提高几个数量级.在索引中找到条目以后,就可以直接跳转到目标文档的位 ...

  9. jQuery网站顶部定时折叠广告

    效果体验:http://hovertree.com/texiao/jquery/4.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  10. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...