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. 图解MYSQL JOIN ON,SQL JOIN 详解,数据库sql join语句

    对于SQL的Join,在学习起来可能是比较乱的.我们知道,SQL的Join语法有很多inner的,有outer的,有left的,有时候,对于Select出来的结果集是什么样子有点不是很清楚.Codin ...

  2. myeclipse 保存时自动格式化代码

    windows -> preferences -> Java -> Editor -> Save Actions... 这就可以用到很多功能了,可以自己定义一些个保存后要处理的 ...

  3. php实现两分法查找

    两分法查找的前提:顺序方式存储,而且必须是排好序 直接上代码: function search($array, $target, $low = 0, $high = 0){ $len = count( ...

  4. 已知某一天是周几 求给定的一天是周几的算法 C++实现

    #include<iostream> using namespace std; struct Date{ int year,month,day; }; enum Week{ MON=, T ...

  5. 概率法求解三阶幻方［C语言］

    #include <stdio.h> #include <string.h> ]={,,,,,,,,}; ]; ][]; int sum(int su[]) { ; ;su[i ...

  6. windbg 调试技巧

    技巧一:在加载名卸载的时候下断点 1. 加载某个DLL 的时候下断点的WinDBG 命令: sxe ld:[dll name] 然后按F5,进行刷新,再使用lmf 查看装载的Dll名称. 2.  卸载 ...

  7. SQL Server 查看一个表上的索引

    方法:1 sys.indexes index_id =0:堆 index_id =1:聚集索引 index_id =2.....:非聚集索引 ----------------------------- ...

  8. 介绍几种IC卡

    介绍几种IC卡 Mifare卡:工作频率:13.56MHZ数据保存期:10年 操作时间:96ms读写距离:2.5-10cm   存储容量:8Kbit尺寸:85.6x54x0.76mm 存储器类型:EE ...

  9. Windows 7妙用 笔记本变无线AP轻松共享

    笔记本变AP的前提和应用原理 笔记本变AP的前提是你所处的房间或地点需要提供有线宽带的连接,而且你的笔记本要有无线网卡.如果这两个条件具备了,即使没有路由器/无线AP等辅助设备,多个笔记本电脑共享上网 ...

  10. 关于Lambda表达式访问外部变量

    在<C#高级编程>一书中提到通过Lambda表达式可以访问Lambda表达式块外部的变量 ,这是一个很好的功能(类似Js中的 闭包).但是如果没有正确的使用,会非常危险. 比如下面的事例中 ...