实例1：图片水平垂直居中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div style="background-color: gray;line-height: 300px;text-align: center;">
  11.         <img src="123.jpg" style="width: 300px;vertical-align: middle;">
  12.     </div>
  13.     <!-- 关键在于是要设置父级line-height的值，而不是height，再就是img的vertical-align: middle-->
  14. </body>
  15. </html>

实例2：多行文本水平垂直居中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         .box{
  10.             line-height: 250px;
  11.             text-align: center;
  12.             background-color: gray;
  13.         }
  14.         .text{
  15.             display: inline-block;
  16.             line-height: normal;
  17.             vertical-align: middle;
  18.             text-align: left;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div class="box">
  24.         <span class="text">秋风用时光的旋律，用桂花的芬芳、苹果的馨香、菊花的灿烂、牵牛花的奔放、一串红的艳丽，把一望无际的田野乡村，演绎得在自然中沉醉，渲染得天地间空旷而又阳刚。秋风用时光的旋律，用桂花的芬芳、苹果的馨香、菊花的灿烂、牵牛花的奔放、一串红的艳丽，把一望无际的田野乡村，演绎得在自然中沉醉，渲染得天地间空旷而又阳刚</span>
  25.     </div>
  26.     <!-- 多行文本垂直居中，最主要的是要重置子元素的line-height和text-align，并把display设置为inline-block
  27.         这是因为子元素的line-height和text-align如果不设置就继承父级的，与我们想要表示有冲突，设置为display:inline-block
  28.         是因为子元素的行高是根据line-height: normal属性，就字体大小重新计算，而设置大小就要求子元素是block类型的
  29.     -->
  30. </body>
  31. </html>

line-height应用实例的更多相关文章

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

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

  2. How to Take Control of Your Line Height in Outlook.com

    Reference to: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

  3. height与line-height

    1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...

  4. Delphi XE5教程3：实例程序

    内容源自Delphi XE5 UPDATE 2官方帮助<Delphi Reference>,本人水平有限,欢迎各位高人修正相关错误! 也欢迎各位加入到Delphi学习资料汉化中来,有兴趣者 ...

  5. 真正的能理解CSS中的line-height，height与line-height

    https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...

  6. Python Line Messaging Api

    Line Messaging line 是国外一个很火的实时通信软件,类似与WX,由于公司业务需求,需要基于line开发一个聊天平台,下面主要介绍关于line messaging api 的使用. 官 ...

  7. 在网页布局中合理使用inline formating context（IFC）

    引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.

  8. canvas实践1

    今天同学遇到问题,我于是就利用了canvas帮他写了个效果,效果如图 我本来在学习不是很想做,但是昨天感觉自己学的有点累就去帮忙做了,我的思路是每次画一个矩形,然后通过rotate旋转让它自身旋转45 ...

  9. [JS,NodeJs]个人网站效果代码集合

    上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...

  10. Xamarin.Forms——尺寸大小（五 Dealing with sizes）

    如之前所见的大量可视化元素均有自己的尺寸大小: iOS的状态栏高度为20,所以我们需要调整iOS的页面的Padding值,留出这个高度. BoxView设置它的默认宽度和高度为40. Frame的默认 ...

随机推荐

  1. [dev]typeof, offsetof 和container_of

    转一篇文章.写的比较好,浅显易懂,还画了图. https://www.cnblogs.com/idorax/p/6796897.html 概况一下: container_of用到了typeof和off ...

  2. Apache Arrow

    https://www.kdnuggets.com/2017/02/apache-arrow-parquet-columnar-data.html https://arrow.apache.org/ ...

  3. C# Collection 排序

    Collection<int> aa = new Collection<int>(); aa.Add(1); aa.Add(2); aa.Add(3); aa.Add(1); ...

  4. nginx匹配规则说明以及匹配的优先级

    location 匹配规则语法规则 location [=|~|~*|^~] /uri/ { … } 模式    含义location = /uri    = 表示精确匹配,只有完全匹配上才能生效lo ...

  5. 2018-2019-2 网络对抗技术 20165317 Exp5 MSF基础应用

    2018-2019-2 网络对抗技术 20165317 Exp5 MSF基础应用 一.原理与实践说明 1.实践内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具 ...

  6. HDU 2196树形DP(2个方向)

    HDU 2196 [题目链接]HDU 2196 [题目类型]树形DP(2个方向) &题意: 题意是求树中每个点到所有叶子节点的距离的最大值是多少. &题解: 2次dfs,先把子树的最大 ...

  7. Centos7 关于防火墙的一些简单配置

    近期安装了linux系统Centos7,接触下来发现了与原来的Centos6.5有一些差别,这里主要记录下来我的一些关于Centos7防火墙的了解. 一.firewall简介 CentOS 7中防火墙 ...

  8. windows程序设计 获取磁盘容量

    //磁盘分区的总容量(字节)=总簇数*每簇扇区数*每扇区字节数 //磁盘分区的空闲空间(字节)=空闲簇数*每簇扇区数*每扇区字节数 BOOL GetDiskFreeSpace( LPCTSTR lpR ...

  9. 安装linux虚拟机

    虚拟机安装流程 1. 安装系统 安装完成 2. 安装VMware tools linux(ubuntu 18.04 Desktop) 手动安装 1) 加载光驱 2) 双击进入光驱,在光驱的目录下,打开 ...

  10. Spring Boot：简介

    一.概述 Spring Boot 是Java一个开源框架,主要用途是用来创建微服务:可以用来创建独立的.生产的基于Spring的应用程序. Spring Boot 采用默认配置观点,多数Spring ...