实例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. h5跳转

    <!doctype html> <html lang="en" style="width:100%; height:100%"> < ...

  2. cygwin的sh: line 15: $'\r': command not found错误

    安装dos2unix工具,转换一下sh文件即可 apt-cyg install dos2unix dos2unix xxx.sh

  3. js导航栏单击事件背景颜色变换

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  4. JavaScript 中 return，return true，return false

    1.return: ①return + 表达式,调用函数,并返回表达式的值 ②return,终止函数 ③当代码执行到return语句时,函数返回一个结果就结束运行了,return后面的语句根本不会执行 ...

  5. [PCL]模型拟合方法——随机采样一致性

    SACSegmentation封装了多种Ransac方法,包括: RandomSampleConsensus, LeastMedianSquares, MEstimatorSampleConsensu ...

  6. mysql表类型导致的 setRollbackOnly() 事务不回滚

    在SpringBoot 中,使用事务非常简单,只需在方法上面加入 @Transactional  注解就可以实现.也可加在类上,此时则类中所有方法都支持事务. 而当我使用下面代码时,发现事务却没有回滚 ...

  7. https://blog.csdn.net/uftjtt/article/details/79044186

    https://blog.csdn.net/uftjtt/article/details/79044186

  8. Azure上搭建ActiveMQ集群-基于ZooKeeper配置ActiveMQ高可用性集群

    ActiveMQ从5.9.0版本开始,集群实现方式取消了传统的Master-Slave方式,增加了基于ZooKeeper+LevelDB的实现方式. 本文主要介绍了在Windows环境下配置基于Zoo ...

  9. kaggle learn python

    def has_lucky_number(nums): return any([num % 7 == 0 for num in nums]) def menu_is_boring(meals): &q ...

  10. centos7安装gcc7.2.0

    1.有时候安装某些工具时,会提示gcc版本过低,需要安装更高版本. 进入/usr/src目录 cd usr/src 2.下载gcc7.2.0 wget 'http://mirrors-usa.go-p ...