场景：父元素 高度固定，如何使其中的文字垂直居中？

1、table布局：

　　利用display:table+display:table-cell的方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    .middle-box{

        display: table; /*重点*/

        height: 300px;border: 1px solid #;

    }

    /*重点：table-cell布局*/

    .middle-inner{

        display: table-cell;

        vertical-align:middle;

        text-align:center;

    }

</style>

<body>

<div class="middle-box">

    <div class="middle-inner">

        <p><span class="suc-tip">前端开发博客，专注前端开发和web教程</span><br/><span class="suc-link">快捷入口：<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>

        <p style=""><span class="suc-tip">5年的老博客，一直致力于WEB开发</span></p>

    </div>

</div>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    .middle-box{

        display: table; /*重点*/

        height: 300px;border: 1px solid #;

    }

    /*重点：table-cell布局*/

    .middle-inner{

        display: table-cell;

        vertical-align:middle;

        text-align:center;

        height: 200px;

        border:1px solid #;

    }

</style>

<body>

<div class="">

    <div class="middle-inner">

        <p><span class="suc-tip">前端开发博客，专注前端开发和web教程</span><br/><span class="suc-link">快捷入口：<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>

        <p style=""><span class="suc-tip">5年的老博客，一直致力于WEB开发</span></p>

    </div>

</div>

</body>

</html>

效果：

　　利用display:table-cell

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>css居中对齐</title>

    <style>

        *{padding: ;margin:;font-size: 12px;}

        div{display: table-cell;width: 200px;height:150px;border:1px solid blue;vertical-align: middle;}

    </style>

    <div>

        <span>测试文字测试文字</span>

    </div>

    <div>

        测试文字测试文字

    </div>

    <div>

        <p>测试文字测试文字</p>

        <p>测试文字测试文字</p>

    </div>

</body>

</html>

　　效果：

　　优点：等高布局，无需设置高度，文字轻松实现垂直居中

　　缺点：ie7以下不兼容！

2、利用line-height和vertical-align：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>css居中对齐</title>

    <style>

        *{padding: ;margin:;font-size: 12px;}

        div{float: left;width: 200px;height:200px;margin: 10px;border:1px solid #; line-height: 200px;}

        span{display: inline-block;vertical-align: middle;line-height: 22px;}

    </style>

    <div>

        <span>测试文字测试文字</span>

    </div>

    <div>

        <span>测试文字 <br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字</span>

    </div>

</body>

</html>

　　效果：

　　关键样式：

　　① 父元素（这里是div）设置和高度一致的 line-height （这里是200px）--- 由后面的vertical-align定义看，这是为了设置div的基线

　　② 子元素 (这里是span) 设置合适的line-height，并设置display:inline-block、vertical-align: middle;  --- inline水平的元素无法设置line-height，所以这里要设置inline-block。

　　重新审视一下 CSS vertical-align 属性 的定义：

　　该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐，允许指定负长度值和百分比值，这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

　　有以下几点需要注意：

　　① vertical-align属性应该设置到 行内元素上（行内块元素也可）

　　② 如果文字的总高度超出了 容器（这里是div）的高度，那么垂直居中会失效。

　　③ ie7以下 span结束标签和内部内容不能有间隔空白，也就是说span的结束标签和内部内容要连在一起。

纯CSS实现多行文字垂直居中几种方法解析的更多相关文章

  1. css 单行/多行文字垂直居中问题

    例子可以直接看这里http://www.zhangxinxu.com/study/200911/line-height-text-v-center.html 这篇文章中有一点点解释http://blo ...

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

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

  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. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

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

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

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

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

  8. 利用css去除input按钮上的文字的几种方法

    相信很多时候input上的文字困扰着web前端开发者,必须要通过修改html代码中的value值才能清空按钮上的文字,但很多人不愿意去动html代码,一方面麻烦,另外主要的原因还在于保留文字对seo有 ...

  9. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

随机推荐

  1. Django 批量导入文件

    1. 按照xlrd软件 pip3 install xlrd 2. POST提交文件获取数据 方法一:写入硬盘,xlrd读取xlsx文件获取文件数据 def batch_view(self,reques ...

  2. IIS 7/8安装SSL证书

    文件说明:1. 证书文件1532113691949.pem,包含两段内容,请不要删除任何一段内容.2. 如果是证书系统创建的CSR,还包含:证书私钥文件1532113691949.key.PFX格式证 ...

  3. javascript大神修炼记（3）——条件分支

    读者朋友们好,我们今天接着前面的讲,前面已经大概了讲了一下运算符,今天的任务主要就是讲解逻辑条件分支,循环. 我们先就来模拟一个逻辑块,就用我们经常接触到的买车票来说吧,车票的价格对不同的人价格是有差 ...

  4. YII2源码阅读：autoload_real.php 22~23行

    spl_autoload_register(array('ComposerAutoloaderInit32b8eb537f8e12e57c5e7bade69d01f0', 'loadClassLoad ...

  5. windows同时使用python2和3

    前言 手头有些脚本,有些是在python2的环境下使用,有些是在python3的环境下使用 以前我是把python3的脚本都放在虚拟机中,现在发现是真的麻烦,于是来研究一下如何使得python2和3共 ...

  6. Linux操作命令（三）

    本次实验将介绍 Linux 命令中 more.less.head.tail 命令的用法. more less head tail 1.more ·more功能类似cat,cat命令是将整个文件的内容从 ...

  7. HDU 1011 Starship Troopers【树形DP/有依赖的01背包】

    You, the leader of Starship Troopers, are sent to destroy a base of the bugs. The base is built unde ...

  8. 洛谷P2278 [HNOI2003] 操作系统

    题目传送门 分析:题目中提到了优先级,很显然这题要用优先队列+模拟.题目中很多细节需要注意,还是在代码中解释吧,这里我用的是手打的堆. Code: #include<bits/stdc++.h& ...

  9. [BZOJ2159]Crash的文明世界(斯特林数+树形DP)

    题意:给定一棵树,求$S(i)=\sum_{j=1}^{n}dist(i,j)^k$.题解:根据斯特林数反演得到:$n^m=\sum_{i=0}^{n}C(n,i)\times i!\times S( ...

  10. [COCI2011-2012#7] KAMPANJA

    这个题似曾相识啊,以前是用搜索剪枝+0/1边权bfs做的(题面可以参照上一篇这个题的博客). 有一类问题就是求 包含若干关键点的最小强联通子图大小是多少. 如果关键点数量是变量,那么就是NP问题了.. ...