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. 关于上次我写的那个ATM程序 ，程序没有什么错，但是有些麻烦，两个类中有好多成员函数重复，因此我把ATM重新写了一边。

    不好意思!但是现在这个程序比上次那个好多了,而且没有重复,程序看起来比较简练,以下是新程序: #include<iostream>#include<string>using n ...

  2. str系列---字符串函数

    1. strcat extern char *strcat(char *dest,char *src); 把src所指字符串添加到dest结尾处(覆盖dest结尾处的'\0')并添加'\0'. 返回指 ...

  3. Oracle EBS-SQL (INV-2):库存会计期间.sql

    SELECT STATUS, PERIOD_NAME, PERIOD_NUMBER, PERIOD_YEAR, START_DATE, END_DATE, CLOSE_DATE, REC_TYPE,  ...

  4. Oracle EBS-SQL (SYS-18):检查系统安装的各个表是否打开(PJM%).sql

    select status, trigger_name from all_triggers where trigger_name like 'PJM%'; ALTER TRIGGER PJM_ORG_ ...

  5. 细说javascript函数

    javascript函数是一个比较奇怪的东西,接触一段时间你就会犯迷糊,弄不明白它到底是什么了.你是否会因为有的javascript函数没有名字而莫名其妙,是否会因为javascript函数的参数没有 ...

  6. 桂林电子科技大学出校流量控制器Android版1.0.0

    每次玩游戏的时候,总是要开着电脑挂着出校控制器,真是浪费国家资源啊,,, 突然想起学校有个开放流量的网页,无奈UC等浏览器真是尝试优化js脚本啊,挂在后台,不到几分钟就掉线了,悲剧啊~~~ 还好And ...

  7. overfllow的解析

    参数是scroll时候,必会出现滚动条.参数是auto时候,子元素内容大于父元素时出现滚动条.参数是visible时候,溢出的内容出现在父元素之外.参数是hidden时候,溢出隐藏.

  8. 在Mac上配置Apache+PHP环境

    1.启用Apache/Web共享 打开终端,运行启动Apache命令: sudo apachectl start 然后输入系统密码,运行成功. 关闭命令: sudo apachectl stop 重启 ...

  9. 2.1确定一个char包含何种字符

    知识点: 1.char.IsControl 2.char.IsPunctuation 3.char.IsSurrogate 4.char.IsWhitespace 5.char.IsDigit 6.c ...

  10. 散列表的实现 -- 数据结构与算法的javascript描述 第八章

    散列表(哈希表 散列是一种常用的数据存储技术,散列后的数据可以快速地插入或取用. 散列表需要一个散列值(key)来存储指定数据,取数据也是依靠此. 散列值可以依靠计算数据的 ASCII码来获得,但是这 ...