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

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

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

单行垂直居中效果如下：

　　　　　　

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

　　 现象如下：

　　　　　　

　　代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>css中line-height的应用</title>
  6.     <style>
  7.         *{
  8.             margin: 0px;
  9.             padding: 0px;
  10.         }
  11.         div{
  12.             width: 200px;
  13.             height: 200px;
  14.             background-color: aquamarine;
  15.         }
  16.         p{
  17.             text-align: center;/*水平居中*/
  18.             line-height: 200px;/*垂直居中*/
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div>
  24.         <p>垂直居中的问题</p>
  25.     </div>
  26. </body>
  27. </html>

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

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

　　　  效果如下：

　　　　　　

　　 代码如下：　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>css中line-height的应用</title>
  6.     <style>
  7.         *{
  8.             margin: 0px;
  9.             padding: 0px;
  10.         }
  11.         div{
  12.             width: 200px;
  13.             height: 200px;
  14.             background-color: aquamarine;
  15.             position: relative;
  16.         }
  17.         .div1{
  18.             text-align: center;/*水平居中 */
  19.             /*line-height: 200px;!*垂直居中 *!*/
  20.             width: 140px;
  21.             height: 90px;
  22.             /*font-size: 20px;*/
  23.             background-color: #cad5eb;
  24.             position: absolute;
  25.             left: 0px;
  26.             right: 0px;
  27.             top: 0px;
  28.             bottom: 0px;
  29.             margin: auto;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <div>
  35.         <div class="div1">
  36.             <p>垂直居中的问题垂直居中的问题垂直居中的问题垂直居中的问题垂直居中的问题</p>
  37.         </div>
  38.     </div>
  39. </body>
  40. </html>

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

　　　  效果如下：

　　 代码如下：　　　　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>line-height单行文本垂直居中2</title>
  6.     <style>
  7.         *{
  8.             margin: 0px;
  9.             padding: 0px;
  10.         }
  11.         /*div{*/
  12.             /*width: 200px;*/
  13.             /*height: 200px;*/
  14.             /**/
  15.         /*}*/
  16.         p{
  17.             line-height:150px;
  18.             border:1px dashed #cccccc;
  19.             padding-left:200px;
  20.         }
  21.         p>span{
  22.             display:inline-block;
  23.             line-height:1.4em;
  24.             vertical-align:middle;
  25.             font-size:18px;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <!--<div>-->
  31.         <p>
  32.             <span>
  33.                 这是文字的垂直居中，这是文字的垂直居中，文字大小设置为18px
  34.                 <br />
  35.                 这里是第二行，用来测试多行的显示效果。
  36.             </span>
  37.         </p>
  38.     <!--</div>-->
  39. </body>
  40. </html>

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

　　 效果如下：

　　　　　

　　代码如下：　　　　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>line-height单行文本垂直居中3</title>
  6.     <style>
  7.         *{
  8.             margin: 0px;
  9.             padding: 0px;
  10.         }
  11.         div{
  12.             width:550px;
  13.             height:200px;
  14.             padding-left: 80px;
  15.             border:4px solid #beceeb;
  16.             color:#069;
  17.             display:table-cell;
  18.             /*font-size: 18px;*/
  19.             vertical-align:middle;
  20.         }
  21.         span{
  22.             display:inline-block;
  23.             font-size: 18px;
  24.             /*vertical-align:middle;*/
  25.             text-align: center;/*文字水平居中*/
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div>
  31.         <span>
  32.             像处理图片垂直居中的方式来处理文字的垂直居中即可。
  33.             <br>
  34.             这是第二行，用作测试！
  35.         </span>
  36.     </div>
  37. </body>
  38. </html>

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

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

　　　看实例效果：

　　　　

　  代码如下：　　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>line-height撑起div盒子的高度</title>
  6.     <style>
  7.         *{
  8.             margin: 0px;
  9.             padding: 0px;
  10.         }
  11.         .test1{
  12.             font-size:20px;
  13.             line-height:0;
  14.             border:1px solid #cccccc;
  15.  
  16.         }
  17.         .test2{
  18.             font-size:0;
  19.             line-height:20px;
  20.             border:1px solid #cccccc;
  21.             background-color: aquamarine;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <br/><br/><br/><br/><br/>
  27.     <div class="test1">测试</div>
  28.     <br/><br/><br/><br/><br/>
  29.     <div class="test2">测试</div>
  30. </body>
  31. </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. CSRF verification failed. Request aborted. 表单提交方法为POST时的报错

    本人所用Django版本为1.11,在设置请求方法为POST时,遇到标题中的错误,尝试了多种方法,最终通过下面的操作来修复: 在template文件中添加图中红框部分 接着,导入csrf_exempt ...

  2. Flash学习笔记（01）

    一:动画基础原理 二:Flash的动画的制作方式 三:元件与实例的关系 四:Flash实例     可以做出网上常见的网页动画   Flash能为我们做什么 1.网站.贺卡.配乐短片.短剧.游戏.教学 ...

  3. [POJ2443]Set Operation（bitset）

    传送门 题意:给出n个集合(n<=1000),每个集合中最多有10000个数,每个数的范围为1~10000,给出q次询问(q<=200000),每次给出两个数u,v判断是否有一个集合中同时 ...

  4. 【BZOJ4736】温暖会指引我们前行（LCT）

    题意:有一张图,每条边有一个不同的编号,长度和权值,维护以下操作: 1.加边 2.修改边长 3.询问两点之间在最小权值最大的前提下的唯一路径长度 n<=100000 m<=300000 思 ...

  5. hdu4115：Eliminate the Conflict

    n<=10000局剪刀石头布,对面第i局出Ai,m<=10000种对你出什么提出的要求:Xi Yi Wi 表示第Xi局和第Yi局,Wi=1:必须不同:Wi=0:必须相同,问是否存在你一局都 ...

  6. PatentTips - Solid State Disk (SSD) Device

    BACKGROUND OF THE INVENTION A SSD apparatus is a large-capacity data storage device using a nonvolat ...

  7. Codeforces 660E Different Subsets For All Tuples【组合数学】

    看了官方题解+q神的讲解才懂... 智商问题.. 讲道理..数学真的比脱单难啊... 题目链接: http://codeforces.com/problemset/problem/660/E 题意: ...

  8. POJ 1328 Radar Installation【贪心 区间问题】

    题目链接: http://poj.org/problem?id=1328 题意: 在x轴上有若干雷达,可以覆盖距离d以内的岛屿. 给定岛屿坐标,问至少需要多少个雷达才能将岛屿全部包含. 分析: 对于每 ...

  9. 如何使用eclipse for c/c++ 配置环境编写第一个C程序

    因为VS太大还要安装太多的插件,,,所以想用eclipse编写C语言... 1.下载eclipse for c/c++版本  去官网即可下载   https://www.eclipse.org/dow ...

  10. Mysql数据库的事物

    一 .事物的特性:ACID 数据库的事务必须具备ACID特性,ACID是指 Atomicity(原子性).Consistensy(一致性).Isolation(隔离型)和Durability(持久性) ...