css多行文本垂直居中问题研究

<body>

<h2>垂直居中对齐</h2>

<style>

*{margin:0; padding:0;}

div {border:1px solid #89f989; margin:20px; width:300px; }

.h100{height:100px;}

.h200{height:200px;}

.h400{height:400px;}

.lh200{line-height:200px;}

.lh20{line-height:20px;}

.lh100{line-height:100px;}

.lh400{line-height:400px;}

.va_m{vertical-align: middle;}

.dis_ib{display:inline-block; }

.of_h{overflow:hidden;}

.border_o{border:2px solid orange;}

.w200{width:200px;}

.w500{width:500px;}

.pl30{padding-left:30px;}

</style>

<h3>单行垂直居中 line-height = 容器高度</h3>

<div class="h100 lh100" >文字垂直居中对齐</div>

<h3>容器固定高度 多行文本垂直居中 (chrome firefox ie6/7/8 测试通过)  通过辅助标签实现，其实可以理解为多行文本块变为inline-block元素，然后和一个line-height=容器高度的inline-block元素垂直居中对齐</h3>

<div class="h400 lh400 w500 ov_h">

    <span class="lh20 va_m dis_ib" >设置容器的行高=容器高度，多行文本用p包裹 p设为display:inline-block; vertical-align:middle; span是行内块元素可以设置自己的行高 span后面加个辅助标签比如&lt;i&gt;&amp;nbsp;&lt;/i&gt;(这个i的line-height=容器的line-height = 容器高度)，由于p此时自适应内容宽度，将充满容器，所以i会被挤到下一行，达不到同一行的行内元素垂直对齐的效果,所以i设置负的margin-left 不占据额外的空间，设置font-size:0; 这样就实现了多行文本的垂直居中（ie6/7 p{display:inline-block;} 还是独占一行的）; 到这里其他浏览器都正常了，只是ie6有问题，ie6需要把i也设置为display:inline-block; line-height:容器高度 vertical-align:middle; 相当于两个inline-block;垂直对齐了; 注意： i的font-size不能为0 ie8会不能垂直居中</span>

    <i style="margin-left:-10px; font-size:1px;" class="lh400 dis_ib va_m">&nbsp;</i>

</div>

</body>

css多行文本垂直居中问题研究的更多相关文章

  1. CSS多行文本垂直居中

    今天需要将文本垂直居中,就是一行是垂直居中,多行也是垂直居中. 效果如下 实现代码(同事提供) <!DOCTYPE html> <html> <head lang=&qu ...

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

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

  3. css知识笔记：垂直居中（别只看，请实操！！！）

    css实现元素的垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目的, ...

  4. CSS元素和文本垂直居中

    div居中 1.使用绝对定位和负外边距让块级元素垂直居中 要点:必须提前知道被居中块级元素的尺寸,否则无法准确实现垂直居中. <div id="box"> <di ...

  5. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  6. 一篇通俗易懂的CSS层叠顺序与层叠上下文研究

    网上有很多这方面的教程,但不是苦涩难懂就是从哪copy过来的,反正很长一段时间我是没看懂,时间长了也没打算去研究了,主要原因是,基本上很少会遇到那些问题(所以说啊,要是没有研究精神的才懒得管它).但自 ...

  7. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

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

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

  9. css样式之vertical-align垂直居中的应用

    css样式之vertical-align垂直居中的应用:将图片垂直左右居中 元素垂直居中 1:必须给容器父元素加上text-align:center 2:必须给当前元素转换成行内块元素,display ...

随机推荐

  1. MyEclipse中SVN的使用方法

    来至转载  -----新浪博客 MyEclipse中的SVN操作手册 1.导入项目 点击工具栏上的[File-Import],进入下图

  2. linux查看与设置主机名

    1.设置主机名    通过编辑/etc/sysconfig/network文件中的HOSTNAME字段就可以修改主机名.如下所示:     [root@zijuan /]# vim /etc/sysc ...

  3. php使用正则

    $str = '2';echo preg_match('/^\d{1,10}$/i',$str);//匹配数字,最少1位,最多10位,返回1,否则返回0;

  4. OC语法1——OC概述

    Object-C简介: OC,即Object-C,iOS开发的核心语言.它是基于C语言的,在C的基础上做了面向对象的封装,所以OC是面向对象的语言.同时也因此OC是兼容C的,也就是说在iOS开发中,可 ...

  5. Cookies与保持登录(新浪微博的简单模拟登录)

    Cookies与保持登录(新浪微博的简单登录) .note-content {font-family: "Helvetica Neue",Arial,"Hiragino ...

  6. scrapy中运行爬虫时出现twisted critical unhandled error错误

    1. 试试这条命令: twisted critical unhandled error on scrapy tutorial python python27\scripts\pywin32_posti ...

  7. linux 关于动态库的知识

    问题起缘于编译一个程序时,使用glib2-2.28.8的动态库,而系统自带的是glib2-2.22.5 不想升级系统的glib2库,而使用程序自带库文件的方式加载(类似windows系统,优先加载当前 ...

  8. 游标-----内存中的一块区域,存放的是select 的结果

    游标-----内存中的一块区域,存放的是select 的结果          游标用来处理从数据库中检索的多行记录(使用SELECT语句).利用游标,程序可以逐个地处理和遍历一次检索返回的整个记录集 ...

  9. Bash debug

    Debugging bash scripts Bash can help us to find problems in bash scripts in some ways. You don't exp ...

  10. mciSendString用法

    使用MCI API,源文件中需要包含头文件 Mmsystem.h,在Project->Settings->Link->Object/libray module中加入库 Winmm.l ...