实例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. 转：彻底搞清楚javascript中的require、import和export

    原文地址:彻底搞清楚javascript中的require.import和export   为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Ja ...

  2. 神贴真开眼界：为什么很多人倡导重视能力和素质，但同时对学历有严格要求？——代表了上一场比赛的输赢，招聘成本很重要。如果上一场游戏失败了，尽量让自己成为当前群体的尖子。学历只是其中的一个作品而已，但学历代表了学生时代为之做出的牺牲。人群自有偏向集中性 good

    对于软件工程师职位,没学历没关系,如果真觉得自己才高八斗,请在简历里附上 github项目链接或者 appstore/google play上你的作品.如果学历比别人低,那么想必是把时间和精力用在了其 ...

  3. IDEA导入Git项目后右键项目找不到Git选项的解决方法

    进入Setting -> version Control -> 在下图的第二步中是否有灰色的Module,选中它->点击第三步的+即可 转自:https://blog.csdn.ne ...

  4. 初学Python(二)

    -----------------------------------------------------2019.3.5-00:59--------------------------------- ...

  5. 自定义Win10右键“发送到”菜单

    打开Win10文件资源管理器窗口(打开“这台电脑”或任一文件夹即可),然后在资源管理器窗口的地址栏中输入 shell:sendto ,回车或点击地址栏右侧的“转到”箭头即可打开“SendTo(发送到) ...

  6. 能否显示pdf？

    <iframe src='http://km.shengaitcm.com/ADC/_layouts/15/WopiFrame.aspx?sourcedoc=%2FADC%2FDocLib16% ...

  7. windows10的普通用户使用Task Scheduler的问题

    在Create Task 窗口的General选项卡中,在Security options 里有几个单选项,分别是 Run only when user is logged on ,Run wheth ...

  8. git之commit

    面解释的话, 1.git commit -m用于提交暂存区的文件: 2.git commit -am用于提交跟踪过的文件. 要理解它们的区别,首先要明白git的文件状态变化周期,如下图所示 工作目录下 ...

  9. u盘安装centos7.6 最新版本

    1,可以按照网上的教程,制作u盘启动 2,然后将u盘插入主机,最重要的是这一步,网上的说法基本上适用这个版本 进入到这个界面: 然后选择Install Centos 7,然后按e键,tab是不管用的 ...

  10. jpa 使用笔记

    1,嵌套类查询 List<Person> findByAddress_ZipCode(ZipCode zipCode); ZipCode是Address属性的内部属性. 2,jpa in ...