实例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. git 远程

    git remote add origin [远程仓库地址]

  2. 单机单网卡最大 tcp 长连接数是 65535 吗

    在Linux里,如果是作为客户端或者负载均衡器的节点连接多个服务器,在connect()服务器之前, 调用bind()先绑定IP地址(通常是在多网卡的场景),即使使用bind(IP, port=0), ...

  3. Zynq系列FPGA如何固化bit文件到QSPI_Flash

    最近由于项目需要,要将bit文件固化到zedboard的flash中,使程序上电自启,断电不丢失. 我们知道,一般板级调试的时候都是直接下载bit流到FPGA就行,固化到Flash的话,也是先生成.m ...

  4. JVM深入：JVM内存堆布局图解分析（转）

    转载自:https://www.cnblogs.com/SaraMoring/p/5713732.html 原文:http://www.codeceo.com/article/jvm-memory-s ...

  5. linx下对文件权限设置

    语法格式:chmod u+/-rwx,g+/-rwx,o+/-rwx filename 如:1. 给主人添加读权限,并减去执行权限:chmod u+r,u-x filename2. 给所有用户(主人. ...

  6. 基于ROS的分布式机器人远程控制平台

    基于ROS的分布式机器人远程控制平台   1 结构说明 HiBot架构主要使用C/S架构,其中HibotServer为服务器,Muqutte为消息服务器中间件,HiBotClient为运行在机器人上的 ...

  7. 【LeetCode每天一题】Rotate List(旋转链表)

    Given a linked list, rotate the list to the right by k places, where k is non-negative. Example 1: I ...

  8. linux安装软件时提示找不到镜像的问题：Couldn't resolve host 'mirrorlist.centos.org'

    问题:[root@cddserver2 ~]# yum -y install gcc-*Loaded plugins: fastestmirror, prestoCould not retrieve ...

  9. 【stm32开发之HAL采坑记之：001使用ST-LINK下载出错问题】

    使用ST-LINK下载出错问题 开发环境:swstm32+stm32cubeMx+硬石F1开发板 联系方式:yexiaopeng1992@126.com 出现问题:在使用ST-linik下载时发现,在 ...

  10. A Simple Nim (SG打表找规律)

    题意:有n堆石子,每次可以将其中一堆分为数量不为0的3堆,或者从其中一堆中拿走若干个,最终拿完的那个人赢. 思路:直接暴力SG状态,然后找出其中的规律,异或一下每一堆的状态就可以了. #include ...