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

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. Two Sum ——经典的哈希表的题

    Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...

  2. oracle 导入dmp文件

    /*第1步:创建临时表空间  */ create temporary tablespace webdata_temp tempfile 'D:\oracle\product\10.2.0\oradat ...

  3. gulp-基本功能总汇

    研究了三天的gulp,今天做一个结束吧. 本次包含的功能有: html压缩 图片压缩 css压缩 js检测 js压缩 文件合并 文件更名 提示信息 编译less 创建服务器-浏览器实时刷新 因为我安装 ...

  4. 9. Spark Streaming技术内幕 : Receiver在Driver的精妙实现全生命周期彻底研究和思考

        原创文章,转载请注明:转载自 听风居士博客(http://www.cnblogs.com/zhouyf/)       Spark streaming 程序需要不断接收新数据,然后进行业务逻辑 ...

  5. PTA L2-001 紧急救援-最短路(Dijkstra)多条最短路找最优解并输出路径 团体程序设计天梯赛-练习集

    L2-001 紧急救援 (25 分)   作为一个城市的应急救援队伍的负责人,你有一张特殊的全国地图.在地图上显示有多个分散的城市和一些连接城市的快速道路.每个城市的救援队数量和每一条连接两个城市的快 ...

  6. 转：x64与x86的改变

    http://tieba.baidu.com/p/1250470248 x64与x86的改变 硬件要求就是64位的CPU.操作系统也必须是64位的,如果在64位的CPU上安装了32位的操作系统,就算编 ...

  7. 35、Flask实战第35天：权限设计

    二进制及其相关运算 认识二进制 0,1,2,3,4,5,6,7,8,9,10:逢10进1 0,1:逢2进1 二进制转十进制 十进制 二进制 0 0 1 1 2 10 3 11 4 100 255 11 ...

  8. hdu 4747 Mex( 线段树？ 不，区间处理就行（dp？））

    Mex Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Submis ...

  9. CodeForces - 1000E We Need More Bosses

    题面在这里! 依然一眼题,求出割边之后把图缩成一棵树,然后直接求最长链就行了2333 #include<bits/stdc++.h> #define ll long long using ...

  10. 【二分】Subsequence

    [POJ3061]Subsequence Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 15908   Accepted:  ...