例子可以直接看这里http://www.zhangxinxu.com/study/200911/line-height-text-v-center.html

这篇文章中有一点点解释http://blog.csdn.net/hdchangchang/article/details/47086565

这一篇提出了一个新想法 http://caibaojian.com/css-vertical-middle.html

总的来说,有三种方法实现高度不固定的多行文字垂直居中对齐,一种是使用父元素line-height + 子元素inline-block,第二种是利用table-cell,第三种是再加一个看不见的标签,三种方法文章里都有提到。

css 单行/多行文字垂直居中问题的更多相关文章

  1. div+css使多行文字垂直居中?

    1.单行文字: 设置height = line-height; 多行文字: 设置 padding, 自己要计算一下? vertical-align: 可以设置垂直居中, 但是只是针对本身就具有 ali ...

  2. 纯CSS实现多行文字垂直居中几种方法解析

    场景:父元素 高度固定,如何使其中的文字垂直居中? 1.table布局: 利用display:table+display:table-cell的方法 <!DOCTYPE html> < ...

  3. css布局-多行文字垂直居中

    方法一: 代码: <style> *{padding: ;margin:;font-size: 12px;} div{float: left;width: 200px;height:200 ...

  4. 使用css属性line-height实现文字垂直居中的问题

    使用css属性line-height实现文字垂直居中的问题 1.使用css属性line-height实现文字垂直居中 方法比较简单,但是只能实现单行文字的垂直居中. 单行垂直居中效果如下:   要是p ...

  5. CSS实现多行文字限制显示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  6. css实现多行文字限制显示&编译失效解决方案

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  7. div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)

    说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的 ...

  8. 用CSS如何实现单行图片与文字垂直居中

    图片样式为 以下为引用的内容:.style img{vertical-align:middle;.....} 如果STYLE中有其它如INPUT或其它内联元素可写成 以下为引用的内容:.style i ...

  9. 多行文字垂直居中(完美兼容chrome firefox IE6 7 8 9)

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

随机推荐

  1. python学习笔记16-装饰器

    装饰器(函数) 1.函数作用域 2.高阶函数 把函数作为参数传入,这样的函数称为高阶函数,函数式编程就是指这种高度抽象的编程范式. 3.闭包  闭包就是能够读取其他函数内部变量的函数. 在本质上,闭包 ...

  2. golang 闭包求斐波那契数列

    题目是Go指南中的闭包求斐波那契数列 package main import "fmt" // 返回一个"返回int的函数" func fibonacci() ...

  3. Apache JMeter的基本使用

    安装 安装地址:http://jmeter.apache.org/download_jmeter.cgi 解压后运行jmeter.bat的批处理文件就可以了 JMeter测试脚本编写: 1,创建线程组 ...

  4. shell 数组使用简介

    数组简介 bash 只提供一维数组,并且没有限定数组的大小.类似与C语言,数组元素的下标由0开始编号.获取数组中的元素要利用下标.下标可以是整数或算术表达式,其值应大于或等于 0.用户可以使用赋值语句 ...

  5. [转]让程序不触发 Vista/Win7下应用程序兼容性助手弹出 .

    原文地址 http://blog.csdn.net/maxuhuiabc/article/details/6081874 在Vista/Win7下 运行一个 exe 应用程序后,系统经常弹出 兼容性助 ...

  6. dispatchEvent相关内容

    意思就是:手动触发事件. 我的理解是:类似于jquery中的trigger方法,可以在点击某个dom的时候,触发另一个dom的事件,下面一个我自己尝试的例子: <!DOCTYPE html> ...

  7. JavaScript事件模型

    1.什么是事件? 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软件工程中被称为观察员模式的模型,支持页面的行为 ...

  8. 分布式锁的两种实现方式(基于redis和基于zookeeper)

    先来说说什么是分布式锁,简单来说,分布式锁就是在分布式并发场景中,能够实现多节点的代码同步的一种机制.从实现角度来看,主要有两种方式:基于redis的方式和基于zookeeper的方式,下面分别简单介 ...

  9. JDBC中链接数据库前为什么要用Class.forName(驱动类)加载驱动类?

    使用JDBC链接数据库时,为什么要先使用Class.forName(String name)来加载类? 答: 实际上就是为了加载类时,调用静态初始化块中的注册函数. 可以看一下MySql的Driber ...

  10. es简单介绍及使用注意事项

    是什么? Elasticsearch是一个基于Apache Lucene(TM)的开源搜索引擎.无论在开源还是专有领域,Lucene可以被认为是迄今为止最先进.性能最好的.功能最全的搜索引擎库. El ...