使用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. 【Python基础】迭代器、生成器

    迭代器和生成器 迭代器 一 .迭代的概念 #迭代器即迭代的工具,那什么是迭代呢? #迭代是一个重复的过程,每次重复即一次迭代,并且每次迭代的结果都是下一次迭代的初始值 while True: #只是单 ...

  2. fstream，sstream的学习记录

    fstream: #include<iostream> #include<fstream> using namespace std; int main(){ ofstream ...

  3. Java学习之理解多态

    Java 多态 多态是同一个行为具有多个不同表现形式或形态的能力.多态就是同一个接口,使用不同的实例而执行不同操作,多态性是对象多种表现形式的体现.例如:可以把人分为男人和女人,男人有做力气活的能力, ...

  4. spring的IOC入门案例

    步骤: 一,导入jar 二,创建类,在类里创建方法 三,创建Spring配置文件,配置创建类 四,写代码测试对象创建

  5. Charm Bracelet（01背包）

    Bessie has gone to the mall's jewelry store and spies a charm bracelet. Of course, she'd like to fil ...

  6. [codevs1050]棋盘染色 2

    [codevs1050]棋盘染色 2 试题描述 有一个5*N的棋盘,棋盘中的一些格子已经被染成了黑色,你的任务是对最少的格子染色,使得所有的黑色能连成一块. 输入 第一行一个整数N(<=100) ...

  7. android修改系统时系统黑屏时不进入休眠状态

    基于android4.4修改,在frameworks/base/services/java/com/android/server/power/PowerManagerService.java里,查看休 ...

  8. 【BZOJ3295】动态逆序对（BIT套动态加点线段树）

    题意:对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数. 给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计整个序列的逆序对 ...

  9. Nginx配置upstream实现负载均衡及keepalived实现nginx高可用

    (原文链接:http://www.studyshare.cn/blog-front//blog/details/1159/0 ) 一.准备工作 1.准备两个项目,发布到不同的服务器上,此处使用2个虚拟 ...

  10. 在d盘中创建一个文件夹 在文件夹里创建三个txt文本

    import java.io.File; import java.io.IOException; public class FileDemo { public static void main(Str ...