CSS之未知高度多行文本垂直居中

一直比较纠结垂直居中的问题，最近又查阅了一些资料，借鉴了一些优秀方案，捣鼓出了一个兼容性较强的多行文本垂直居中解决方案，主要思路依然是利用vertical-align:middle来实现，经过测试，该方案能兼容IE6及以上版本的浏览器，先看代码：

1 <style type="text/css">
2 .box {
3     border: 1px dashed #cccccc;
4     height: 300px;
5     font-size: 0;
6 }
7 .box p, .box i {
8     display: inline-block;
9     vertical-align: middle;
10     overflow: hidden;
11     *display:inline;
12     *zoom:1;
13 }
14 .box i {
15     height: 100%;
16     width: 0;
17 }
18 .box p {
19     font-size: 14px;
20     width: 100%;
21 }
22 </style>
23 <div class="box">
24   <p class="text">多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居</p>
25   <i></i>
26  </div>

关于该方案有几点说明：

1.行元素的vertical-middle属性需要一个参照物，所以这里在需要垂直居中的多行文本后面增加了一个空标签<i></i>，让需要垂直居中的元素相对于这个空标签垂直居中，另外将空标签的高度设为100%也是该方案的关键

2.设置垂直居中元素<p></p>和参照物<i></i>的display为inline-block，这样两个元素就能现实在一行之中

3.设置父元素<div></div>的font-size为0是为了解决inline-block之间的空格问题，保证元素<p></p>和参照物<i></i>显示在同一行

该方案主要思路是为需要垂直居中的元素找到一参照元素并保证它们同一行显示，从而达到多行文本垂直居中。如果不需要兼容IE6\7，参照元素<i></i>可以用:after或者:before来代替

转载于:https://www.cnblogs.com/daxiong/articles/3750675.html

CSS之未知高度多行文本垂直居中相关推荐

html不知道高文字垂直居中,css实现固定高度及未知高度文字垂直居中的完美解决方案...
在工做当中咱们常常碰到相似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而咱们最容易会想到使用表格来垂直居中,或者若是是单行文字 ...
html垂直居中vertical,HTML_CSS解决未知高度垂直居中，尽管有CSS的vertical-align特性， - phpStudy...
CSS解决未知高度垂直居中尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, ...
html laber上下居中,CSS未知高度垂直居中的实现
本文主要介绍了CSS未知高度垂直居中的实现,分享给大家,具体如下: CSS垂直居中 .container{ width:500px;/*装饰*/ height:500px; background:#B ...
CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素( ...
CSS：实现多行文本垂直居中的四种方法
对于单行文本,可以使用行高等于高度来设置垂直居中,但多行文本不适用. 实现多行文本垂直居中的四种方法 1. 利用表格元素table+vertical-align实现将父元素设置为块级表格来显示,再将 ...
HTML 中多行文本垂直居中
最近在做官网,其中有个小小的需求是一段多行文本在一个区域内垂直居中,就如下图所示: 需要将右面的文字垂直居中,通过网上查找资料显示可以使用display:table 的方法来实现. 请看这篇博文; h ...
php图片居中在div,css如何实现图片在div中垂直居中
本文章主要介绍css如何实现图片在div中垂直居中问题,具有一定参考价值,希望能给大家提供帮助平时我们在做页面时经常会遇到让我们把一张图片显示在div正中间但是常常不知道如何去做,今天我们来分享几种 ...
多行文本垂直居中的三种方法
本篇是我整理的多行文本垂直居中的三种方法效果图如下图方法一:父元素使用display:table和子元素使用display:table-cell属性来模拟表格,子元素设置vertical-alig ...

CSS之未知高度多行文本垂直居中

CSS之未知高度多行文本垂直居中相关推荐

最新文章

热门文章