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

1、使用css属性line-height实现文字垂直居中

　　 方法比较简单，但是只能实现单行文字的垂直居中。

单行垂直居中效果如下：

　　　　　　

　   要是p标签内的文字是多行呢，要实现多行垂直居中，还这样设置的话就会出现下一行文字跑出div盒子。每行文字行高跟div盒子高度一样，当文字是多行时，第二行及后面行不跑到盒子外面才怪！

　　 现象如下：

　　　　　　

　　代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css中line-height的应用</title>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        div{

            width: 200px;

            height: 200px;

            background-color: aquamarine;

        }

        p{

            text-align: center;/*水平居中*/

            line-height: 200px;/*垂直居中*/

        }

    </style>

</head>

<body>

    <div>

        <p>垂直居中的问题</p>

    </div>

</body>

</html>

2、怎样实现多行文字垂直居中呢？

　　（1）、使用定位将一个盒子固定在div块中间，将p标签放在盒子中就可实现多行垂直居中。

　　　  效果如下：

　　　　　　

　　 代码如下：　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css中line-height的应用</title>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        div{

            width: 200px;

            height: 200px;

            background-color: aquamarine;

            position: relative;

        }

        .div1{

            text-align: center;/*水平居中 */

            /*line-height: 200px;!*垂直居中 *!*/

            width: 140px;

            height: 90px;

            /*font-size: 20px;*/

            background-color: #cad5eb;

            position: absolute;

            left: 0px;

            right: 0px;

            top: 0px;

            bottom: 0px;

            margin: auto;

        }

    </style>

</head>

<body>

    <div>

        <div class="div1">

            <p>垂直居中的问题垂直居中的问题垂直居中的问题垂直居中的问题垂直居中的问题</p>

        </div>

    </div>

</body>

</html>

　　（2）、借助line-height和vertical-align实现多行文字垂直居中。水平的移动咱借助padding-left来实现。

　　　  效果如下：

　　 代码如下：　　　　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>line-height单行文本垂直居中2</title>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        /*div{*/

            /*width: 200px;*/

            /*height: 200px;*/

            /**/

        /*}*/

        p{

            line-height:150px;

            border:1px dashed #cccccc;

            padding-left:200px;

        }

        p>span{

            display:inline-block;

            line-height:1.4em;

            vertical-align:middle;

            font-size:18px;

        }

    </style>

</head>

<body>

    <!--<div>-->

        <p>

            <span>

                这是文字的垂直居中，这是文字的垂直居中，文字大小设置为18px

                <br />

                这里是第二行，用来测试多行的显示效果。

            </span>

        </p>

    <!--</div>-->

</body>

</html>

　　（3）、就是把文字当图片处理。用一个span标签把所有的文字包进来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。

　　 效果如下：

　　　　　

　　代码如下：　　　　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>line-height单行文本垂直居中3</title>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        div{

            width:550px;

            height:200px;

            padding-left: 80px;

            border:4px solid #beceeb;

            color:#069;

            display:table-cell;

            /*font-size: 18px;*/

            vertical-align:middle;

        }

        span{

            display:inline-block;

            font-size: 18px;

            /*vertical-align:middle;*/

            text-align: center;/*文字水平居中*/

        }

    </style>

</head>

<body>

    <div>

        <span>

            像处理图片垂直居中的方式来处理文字的垂直居中即可。

            <br>

            这是第二行，用作测试！

        </span>

    </div>

</body>

</html>

3、插一个题外话：一个空的div盒子，<div></div>里面什么都不放，他的高度值为0,；但是在里面放入文字后，div盒子立马就有了高度，怎么就有了高度呢？

　　　你也许会说，div盒子的高度是被文字撑大的。这么说也没啥问题；但是呢，不够严谨。应该说div盒子的高度是被里面文字默认的行高或设置的行高给撑起来的。下面来验证一下。

　　　看实例效果：

　　　　

　  代码如下：　　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>line-height撑起div盒子的高度</title>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        .test1{

            font-size:20px;

            line-height:0;

            border:1px solid #cccccc;

        }

        .test2{

            font-size:0;

            line-height:20px;

            border:1px solid #cccccc;

            background-color: aquamarine;

        }

    </style>

</head>

<body>

    <br/><br/><br/><br/><br/>

    <div class="test1">测试</div>

    <br/><br/><br/><br/><br/>

    <div class="test2">测试</div>

</body>

</html>

　　  可以发现，第一个div的行高设为0，字体尺寸设为20px，结果这个div盒子的高度就只是边框线的高度2px。而第二个div的字体尺寸设为0，行高设为20px,结果发现div盒子的高度变为了行高设置的高度。由此，一个内容为字体的div盒子的高度是由line-height的值决定的。

　　  本文出处：http://www.zhangxinxu.com/wordpress/?p=384

使用css属性line-height实现文字垂直居中的问题的更多相关文章

  1. css之line-height及图片文字垂直居中

    css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的 ...

  2. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  3. css实现固定高度及未知高度文字垂直居中的完美解决方案

    在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字 ...

  4. [HTML]DIV+CSS 文字垂直居中

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

  5. div+css文字垂直居中 解决左侧头像右侧姓名，姓名多换行后相对于头像仍居中显示

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

  6. css解决文字垂直居中

    参考链接: http://www.cnblogs.com/lufy/archive/2012/09/12/2681972.html   http://zhidao.baidu.com/question ...

  7. DIV+CSS如何让文字垂直居中?（转）

    此篇文章转自网络,但是我忘了原文地址,如果有人知道,麻烦告知一声~ 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少 ...

  8. DIV+CSS如何让文字垂直居中？

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

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

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

随机推荐

  1. noi.ac NOIP2018 全国热身赛 第四场 T2 sort

    [题解] 跟51nod 1105差不多. 二分答案求出第L个数和第R个数,check的时候再套一个二分或者用two pointers. 最后枚举ai在b里面二分,找到所有范围内的数,排序后输出. 注意 ...

  2. LeetCode 304. Range Sum Query 2D – Immutable

    Given a 2D matrix matrix, find the sum of the elements inside the rectangle defined by its upper lef ...

  3. Oracle常用内置数据表查询

    Oracle 查询库中所有表名.字段名.字段名说明,查询表的数据条数.表名.中文表名. 查询所有表名:select t.table_name from user_tables t;查询所有字段名:se ...

  4. LA 3890 半平面交

    二分查询答案,判断每一个新形成的向量合在一块能否形成半平面交 #include <iostream> #include <cstdio> #include <cstrin ...

  5. POJ 2288 汉密尔顿回路 DP解决

    题目大意: 有n个岛屿,令Vi为岛屿Ci的权值.一条汉密尔顿路径C1,C2,C3...Cn的值为3部分 第一部分,将路径中的岛的权值相加,第二部分将每条边上的(Ci,Cj),加上所有的Vi*Vj 第三 ...

  6. php 之mysql安全

    php 之mysql安全 原文:https://www.cnblogs.com/mafeng/p/5939329.html. 请浏览原文. 一.服务器配置方面. (1) 打开php的安全模式 php的 ...

  7. HDU 1244 【DP】

    题意: 中文. 思路: 先初步处理,用give-take求出每个城市剩的钱. 求解问题转化成使得和不小于0的最长连续字串. 枚举起点,然后当该起点加的和为负时开始枚举下一起点.(这个状态的转移) 2W ...

  8. IDEA下使用protobuf2(java)

    目录 一.介绍 二.特点 三.结构 四.选择版本 五.Intellij IDEA中使用Protobuf 1.下载个protoc.exe 2.编辑个.proto文件 3.将.proto文件转成Java类 ...

  9. java课堂测试—根据模板完成一个简单的技术需求征集系统

    课堂上老师发布了一个页面模板要求让我们实现一个系统的功能,模仿以后后端的简单工作情况. 然后在这个模板的基础上,提供了一个注册的网页模板,接着点击注册的按钮,发现register里面调用了zhu/zh ...

  10. ARM PPC 交叉编译环境搭建

    ARM: 1,下载cross-3.4.1.tar.bz2 2,在/usr/local目录下建立arm目录 3,将cross-3.4.1.tar.bz2拷贝到arm目录下 4,tar jxvf cros ...