实例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. C博客作业01--分支，顺序结构

    1.本章学习总结 1.1 思维导图 1.2本章学习体会及代码量学习体会 1.2.1学习体会 因为暑假的时候没有事先了解过C语言这门课程,翁恺老师的学习视频没看,pta习题也没有刷,所以开学后学得也蛮吃 ...

  2. DDoS攻击流量检测方法

    检测分类 1)误用检测 误用检测主要是根据已知的攻击特征直接检测入侵行为.首先对异常信息源建模分析提取特征向量,根据特征设计针对性的特征检测算法,若新数据样本检测出相应的特征值,则发布预警或进行反应. ...

  3. Java-字符串、集合

    1.只要是字符串,必然是对象. 2.API文档的基本使用 3.如何创建字符串: 直接饮用赋值,也是一个字符串对象. 可以通过new关键字来调用string的构造方法: public string (c ...

  4. idea搭建可运行Servlet的Web项目[maven]

    1. new Project File > new > Project… 2. 填写 GroupID\ArtifactID GroupID 是项目组织唯一的标识符,实际对应JAVA的包的结 ...

  5. Java 基础 多线程和线程池基础

    一,多线程 1.1 多线程介绍 进程:进程指正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于运行过程中的程序,并且具有一定独立功能. 线程:线程是进程中的一个执行单元,负 ...

  6. 干了这杯java之ThreadLocal

    ThreadLocal Java篇 是什么 怎么用 源码 缺点 总结 是什么 ThreadLocal是一个关于创建线程局部变量的类,这个变量只能当前线程使用,其他线程不可用. ThreadLocal提 ...

  7. 杂记：解决Android扫描BLE设备名称不刷新问题

    背景 个人开发过一种BLE设备有这样一种需求:当设备处于状态A时,广播设备名称A:处于状态B时,广播设备名称B. 问题 我们发现,当Android在进行Ble扫描的时候,扫描回调函数onScanRes ...

  8. redis----------基本命令使用

    1.查看全部缓存数据的key keys * 2.清空当前redis数据库缓存 flushdb  (redis默认由16个库(0~15号). 且默认使用的是0号库.库之间的切换使用select命令例如: ...

  9. idea (2018.09) 安装破解mybatis plugin

    本来打算安装的是mybatis plugin最新版本(4.0.4) 但是安装下来发现lib目录中少mybatis_plugin.jar包 只有手动安装了这里安装的是2.9.2版本使用了一下不受影响 破 ...

  10. 2018 CCPC网络赛 几道数学题

    1002 Congruence equation 题目链接  : http://acm.hdu.edu.cn/showproblem.php?pid=6439 题解 : https://www.zyb ...