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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div style="background-color: gray;line-height: 300px;text-align: center;">

        <img src="123.jpg" style="width: 300px;vertical-align: middle;">

    </div>

    <!-- 关键在于是要设置父级line-height的值，而不是height，再就是img的vertical-align: middle-->

</body>

</html>

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box{

            line-height: 250px;

            text-align: center;

            background-color: gray;

        }

        .text{

            display: inline-block;

            line-height: normal;

            vertical-align: middle;

            text-align: left;

        }

    </style>

</head>

<body>

    <div class="box">

        <span class="text">秋风用时光的旋律，用桂花的芬芳、苹果的馨香、菊花的灿烂、牵牛花的奔放、一串红的艳丽，把一望无际的田野乡村，演绎得在自然中沉醉，渲染得天地间空旷而又阳刚。秋风用时光的旋律，用桂花的芬芳、苹果的馨香、菊花的灿烂、牵牛花的奔放、一串红的艳丽，把一望无际的田野乡村，演绎得在自然中沉醉，渲染得天地间空旷而又阳刚</span>

    </div>

    <!-- 多行文本垂直居中，最主要的是要重置子元素的line-height和text-align，并把display设置为inline-block

        这是因为子元素的line-height和text-align如果不设置就继承父级的，与我们想要表示有冲突，设置为display:inline-block

        是因为子元素的行高是根据line-height: normal属性，就字体大小重新计算，而设置大小就要求子元素是block类型的

    -->

</body>

</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. SNMP 优秀帖子

    -- 比较系统的描述http://blog.sina.com.cn/s/blog_54837cf301011607.html 几个SNMP官方网站(搜索关键字:snmplibrary C#):http ...

  2. Elasticsearch学习笔记（十）批量查询mget、批量增删改bulk

    一.批量查询  mget             GET /_mget {   "docs":[       {         "_index":" ...

  3. SharePoint 已在此服务器场中安装 ID 为 XXXXXXXXX 的功能。请使用强制属性显式地重新安装此功能。解决方法

    图1: 图2: 解决方法: stsadm -o deploysolution -name ***.wsp -immediate -allowGacDeployment -url http://*** ...

  4. 基于Dockerfile创建docker镜像

    0.先创建一个文件夹img mkdir img 1.Linux上新建3个文件 2.文件内容分别写入 (1)Dockerfile中 # 基于的基础镜像centos FROM centos # 维护该镜像 ...

  5. 【Linux】-NO.160.Linux.1 -【升级Centos7】

    Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...

  6. JavaScript 当前URL取参返回字典

    getParam : function(){ return (key, strURL = window.location.search) => new RegExp("(^|\\?|& ...

  7. CDI services--Scope（生命周期）&&EL.(Sp El)

    一.EL/SpEL 1.EL语言(CDI与表达式语言(EL)集成,允许在JavaServer Faces页面或JavaServer Pages页面中直接使用任何组件) 1)概述:EL是JSP内置的表达 ...

  8. navicat 远程访问mariadb失败，修改配置如下

    1.首先配置允许访问的用户,采用授权的方式给用户权限 GRANT ALL PRIVILEGES ON *.* TO 'root'@'%'IDENTIFIED BY '121212' WITH GRAN ...

  9. 000-SQL Server

    MyWeb数据库,cantus表 USE [MyWeb]GO /****** Object: Table [dbo].[cantus] Script Date: 2017/12/12 12:12:12 ...

  10. python爬虫简单的添加代理进行访问

    在使用python对网页进行多次快速爬取的时候,访问次数过于频繁,服务器不会考虑User-Agent的信息,会直接把你视为爬虫,从而过滤掉,拒绝你的访问,在这种时候就需要设置代理,我们可以给proxi ...