使用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. 转载：rest-framework框架的基本组件

    知识预览 快速实例 序列化 视图三部曲 认证与权限组件 解析器 分页 回到顶部 快速实例 Quickstart 回到顶部 序列化 创建一个序列化类 简单使用 开发我们的Web API的第一件事是为我们 ...

  2. 数据结构实验2：C++实现单链表类

    太简单了,直接贴题目然后上代码. 题目: 实验2 2.1 实验目的 熟练掌握线性表的链式存储结构. 熟练掌握单链表的有关算法设计. 根据具体问题的需要,设计出合理的表示数据的链式存储结构,并设计相关算 ...

  3. 【02】sass更新的方法

    [02]更新的方法   gem install sass         **

  4. C# 判断字符串为空的4种方法及效率

    在程序开发过程中,少不了要处理字符串,并且常常要判断字符串是否为空,通常有哪些判断方法,以及不同方法的效率又怎么样? 在 C# 中,通常有三种判断字符串是否为空的方法,下面分别探讨. 1.str.Le ...

  5. [luoguP1437] [HNOI2004]敲砖块（DP）

    传送门 可以得到一个性质,如果打掉第i列的第j个,那么第i列的1~j-1个也会打掉. 如果第i列打j个,那么第i+1列至少打j-1个. #include <cstdio> #include ...

  6. 约分差束 例题 ZOJ 2770 火烧连营

    题目来源:ZOJ Monthly, October 2006, ZOJ2770题目描述:大家都知道,三国时期,蜀国刘备被吴国大都督陆逊打败了.刘备失败的原因是刘备的错误决策.他把军队分成几十个大营,每 ...

  7. Eval 和 Bind 的区别

    原文发布时间为:2008-10-20 -- 来源于本人的百度文章 [由搬家工具导入] 据绑定表达式包含在 <%# 和 %> 分隔符之内，并使用 Eval 和 Bind 函数。 Eval 函 ...

  8. js去除字符串两边的空格

    bless = bless.replace(/(^\s*)|(\s*$)/g, "") // 去掉两边的空格

  9. oracle alert 日志位置

    Oracle 11g Alert log 文件位置的问题 https://blog.csdn.net/yujin2010good/article/details/7690191 https://blo ...

  10. nagios+logstash实时监控java日志(一)

    https://blog.csdn.net/yanggd1987/article/details/64121459