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. Ubuntu下使用Vi时方向键变乱码 退格键不能使用的解决方法

    要在Ubuntu下编辑一些文件,这就涉及到了vi这个编辑器了.在Ubuntu下,初始使用vi的时候有点问题,就是在编辑模式下使用方向键的时候,并不会使光标移动,而是在命令行中出现[A [B [C [D ...

  2. ios 应用程序之间的跳转(内置程序的实现)

    ios 应用程序之间的跳转(内置程序的实现) 一个程序若要跳到另一个程序.需要在目标程序的plist文件里面修改: 打开info.plist,添加一项URL types 展开URLtypes,再展开I ...

  3. Windows系统环境下一个Apache运行多个PHP版本

    我个人机器上环境是基于Apache2.2运行的PHP5.2/4,如你想部署其他版本的PHP或在更多的版本之间切换,同理操作步骤是一致的. 依本人环境为例,机器上已经安装了PHP5.2版本, 所以首先重 ...

  4. LINUX常用命令--重定向、管道篇（四）

    一.Linux重定向 重定向能够实现Linux命令的输入输出与文件之间重定向,以及实现将多个命令组合起来实现更加强大的命令.这部分涉及到的比较多的命令主要有: 涉及到的比较多的命令主要有: cat:连 ...

  5. Oracle EBS-SQL (SYS-9):职责使用菜单.sql

    select aa.menu_name, aa.user_menu_name, aa.type,                 aa.description, aa.ENTRY_SEQUENCE, ...

  6. delphi高手突破学习笔记之面向对象类和对象的本质

    知识点1:堆和栈 每个应用程序可以获得的内存空间分为两种:堆(heap)和栈(stack). 堆又称为“自由存储区”,其中的内存空间的分配与释放是必须由程序员来控制的.例如,用GetMem函数获取了一 ...

  7. Android Studio设置自动编译工程

  8. VC2008如何生成及使用DLL(完整版)

    生成.使用DLL看起来简单,但做起来才发现还是有一些地方需要注意的. 1. 打开VS2008,新建一个VC工程,选择Win32类型,Win32项目: 2. 应用程序类型选择DLL,附加选项选择到处符号 ...

  9. Gdal 1.11.0 添加 Postgresql 9.1 sqlite3 支持

    OS环境Ubuntu12.04 32bit 因为公司一个功能要用到gdal 的ogr2ogr命令转换shp数据,需要能往postgis和sqlite 中插入数据. 用gdal1.11.0的源码默认安装 ...

  10. 编程之美之数独求解器的C++实现方法

    编程之美的第一章的第15节.讲的是构造数独.一開始拿到这个问题的确没有思路, 只是看了书中的介绍之后, 发现原来这个的求解思路和N皇后问题是一致的. 可是不知道为啥,反正一開始确实没有想到这个回溯法. ...