之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐。写这篇文章是因为要兼容IE6、IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中,如果是多行这个肯定不行,而我的同事因为这个用了js来实现居中对齐,我觉得这是很难理解的。故而整理这篇文章。

HTML代码:

<div class="middle-box">
<div class="middle-inner">
<p><span class="suc-tip">前端开发博客,专注前端开发和web教程</span><br/><span class="suc-link">快捷入口:<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
<p style="display:none;"><span class="suc-tip">5年的老博客,一直致力于WEB开发</span></p>
</div>
</div>

  

第一种:display:table的方法

.middle-box{display: table; height: 300px;}
.middle-inner{display: table-cell; vertical-align:middle; text-align:center;}

  

缺点就是不兼容ie6、ie7.怎么兼容呢?·

当然是用另外一种相对定位和绝对定位的方式。

<!--[if lt IE 8]>
<style>
.middle-inner { position: absolute; top:50%;}
.middle-inner p {position: relative; top: -50%}
</style>
<![endif]--

  

可以使用IE的特有的条件语法,不过我习惯用ie hack来写。下面这个的代码实现了水平垂直多行代码(支持一行)居中对齐。目前测试IE、chrome和Firefox均兼容。代码如下:

.middle-box{display: table; height: 300px; border:1px solid #ff0000; width:400px; margin:0 auto; position:relative;}
.middle-inner{display: table-cell; vertical-align:middle; *position:absolute; *top:50%; *left:50%; width:100%; text-align:center;}
.middle-inner p{position:relative; *top:-50%; *left:-50%;}

  

以后遇到居中问题,这三句CSS就够用了。更多的css3 flexbox、margin负值等兼容性还需要探讨。

演示

第二种方法:增加一个空白标签

HTML代码:

<div class="middle-box">
<p><span class="suc-tip">前端开发博客,专注前端开发和web教程</span><br/><span class="suc-link">快捷入口:<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
<i class="visible"></i>
<p style="display:none;"><span class="suc-tip">5年的老博客,一直致力于WEB开发</span></p>
</div>

  

CSS代码:

.middle-box{height:300px; border: 1px solid #f00; width: 400px; margin: 0 auto; text-align: center; }
.middle-box p{vertical-align: middle; display: inline-block; *display: inline; *zoom: 1;}
.visible{height: 100%; vertical-align: middle; width: 0; display: inline-block;}

  

演示:居中对齐

CSS多行文字垂直居中的两种方法的更多相关文章

  1. 实现icon和文字垂直居中的两种方法-(vertical-align and line-height)

    方法一:vertical-align 在w3school定义:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐 百思不得骑姐 然后Google,反正在w3schools上面并没有找到定义 仅 ...

  2. css:图标与文字对齐的两种方法

    (好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...

  3. CSS图标与文字对齐的两种方法

    在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src=&q ...

  4. CSS + ul li 横向排列的两种方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. CSS中设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  6. html之改变图片透明度而不改变文字的透明度--两种方法实现

    图片与图片上的文字设置不同的透明度的两种方法: 第一种方法:背景图+定位+background: url(timg.jpg)no-repeat; <!DOCTYPE html> <h ...

  7. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  8. css不定高图文垂直居中的三种方法

    html部分 <div class="box"> <img class="img" src="http://p2.so.qhmsg. ...

  9. CSS导入使用及引用的两种方法

    方法一<link rel="stylesheet" type="text/css" href="test.css"> 方法二&l ...

随机推荐

  1. bzoj 4866: [Ynoi2017]由乃的商场之旅

    设第i个字母的权值为1<<i,则一个可重集合可以重排为回文串,当且仅当这个集合的异或和x满足x==x&-x,用莫队维护区间内有多少对异或前缀和,异或后满足x==x&-x,这 ...

  2. Ubuntn16.04.3配置root权限及启用root用户

    景 如果你是测试环境需要在VM中装了Ubuntn,安装完成后会创建一个Ubuntn的默认用户,默认用户因为权限的问题很多系统的配置文件不可以打开,默认是只读状态. 那么可以通过以下两种方式切换到roo ...

  3. java高并发编程(二)

    马士兵java并发编程的代码,照抄过来,做个记录. 一.分析下面面试题 /** * 曾经的面试题:(淘宝?) * 实现一个容器,提供两个方法,add,size * 写两个线程,线程1添加10个元素到容 ...

  4. PAT 乙级 1009 说反话 (20) C++版

    1009. 说反话 (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 给定一句英语,要求你编写程序,将句中 ...

  5. Java学习——Applet写字符串(调字体)

    import java.awt.*; import java.applet.Applet; public class GUI2 extends Applet{ public void paint(Gr ...

  6. console输出选择器的问题

    html代码: <input type="text" class="loginInput loginPwText gray" value="密码 ...

  7. Eureka与ZooKeeper 的比较(转)

    https://www.cnblogs.com/zgghb/p/6515062.html Eureka的优势 1.在Eureka平台中,如果某台服务器宕机,Eureka不会有类似于ZooKeeper的 ...

  8. centos6.5制作OpenStack云平台Windows7镜像

    # yum install virt-manager libvirt qemu-img virt-viewer -y # vi /etc/libvirt/qemu.conf # service lib ...

  9. vue todolist 1.0

    <template> <div id="app"> <input type="text" v-model='todo' /> ...

  10. asp.net mvc 5 单元测试小例子

    using System.Collections.Generic; using System.Linq; using Microsoft.VisualStudio.TestTools.UnitTest ...