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. MAVEN入门（一）

    一.Maven的基本概念 Maven是跨平台的项目管理工具.主要服务于基于Java平台的项目构建,依赖管理和项目信息管理. 1.1.项目构建 项目构建过程包括[清理项目]→[编译项目]→[测试项目]→ ...

  2. Linux学习之awk命令

    一. AWK 说明    awk是一种编程语言,用于在linux/unix下对文本和数据进行处理.数据可以来自标准输入.一个或多个文件,或其它命令的输出.它支持用户自定义函数和动态正则表达式等先进功能 ...

  3. drawable 另外一种形式dimens.xml

    常见的Drawable,放置默认drawable一系列目录,有时候会发现drawable找不到的情况,其实还可以放另外一个目录下 values------->>dimens.xml < ...

  4. CSS层

    在使用元素定位时,从可视角度讲,不可避免地会发生两个元素试图同时出现于同一位置的情况.显示其中一个就会覆盖另外一个. 如果将网页的二维空间延伸到三维空间,就会解决上述元素覆盖问题. 在坐标系中,通过增 ...

  5. CSS选择器、优先级和匹配原理

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  6. 製程能力介紹(SPC introduction) ─ Cp之製程能力解釋

    Cp之製程能力解釋 從常態分配的特性來看,在群體中 ±3σ(標準差) 之範圍內的值,應包含群體全部的 99.73%.也就是說,若以 6σ為單位,就可以代表整個分布的範圍,但是有 0.27% (2700 ...

  7. [LeetCode][Python]Median of Two Sorted Arrays

    # -*- coding: utf8 -*-'''https://oj.leetcode.com/problems/median-of-two-sorted-arrays/ There are two ...

  8. javascript关键字加亮加连接

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/str ...

  9. 利用sass构建组件化的ui库

    创建公用的Sass项目模板 在做项目时,不管什么项目,他们之间总是有一些可以共用的部分.比如说重置样式.公用样式.模块组件.UI库等.那么在Sass项目中也是如此.为了避免在每个项目中做一些相同的事情 ...

  10. word-wrap，white-space和text-overflow属性

    (1) //在断点处换行 word-wrap: normal; //允许在长单词进行换行 word-wrap: break-word; (2) white-space:怎么处理元素间的空白 white ...