line-height应用实例
实例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应用实例的更多相关文章
- 深入了解css的行高Line Height属性
什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...
- 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
- height与line-height
1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...
- Delphi XE5教程3：实例程序
内容源自Delphi XE5 UPDATE 2官方帮助<Delphi Reference>,本人水平有限,欢迎各位高人修正相关错误! 也欢迎各位加入到Delphi学习资料汉化中来,有兴趣者 ...
- 真正的能理解CSS中的line-height，height与line-height
https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...
- Python Line Messaging Api
Line Messaging line 是国外一个很火的实时通信软件,类似与WX,由于公司业务需求,需要基于line开发一个聊天平台,下面主要介绍关于line messaging api 的使用. 官 ...
- 在网页布局中合理使用inline formating context（IFC）
引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.
- canvas实践1
今天同学遇到问题,我于是就利用了canvas帮他写了个效果,效果如图 我本来在学习不是很想做,但是昨天感觉自己学的有点累就去帮忙做了,我的思路是每次画一个矩形,然后通过rotate旋转让它自身旋转45 ...
- [JS,NodeJs]个人网站效果代码集合
上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...
- Xamarin.Forms——尺寸大小（五 Dealing with sizes）
如之前所见的大量可视化元素均有自己的尺寸大小: iOS的状态栏高度为20,所以我们需要调整iOS的页面的Padding值,留出这个高度. BoxView设置它的默认宽度和高度为40. Frame的默认 ...
随机推荐
- [math] 我对对数的最新理解
前言 作为资深学渣,每次遇到对数就极度恐慌.恐慌不是因为要考试---.而是因为不理解,只能靠死记硬背运算规则.不能进行有效的推理,这让我极度不爽,因为会忘记.故惶恐. 所以总是耿耿于怀,想要试图理解对 ...
- 安装Nginx到linux服务器（Ubuntu）详解
先去下载一个nginx放到服务器. 然后解压(可参考前面安装tomcat)编译(./configure --prefix=/usr/local/nginx/server/ && mak ...
- Pycharm汉化
简单的汉化方法: 需要把以下链接的文件放到Pycharm安装目录的lib目录下记得重启pycharm即可https://pan.baidu.com/s/1GG4zXZ_0xSB-AlDdu0Tu ...
- git 和github使用
强制推送覆盖到远程仓库!!
- Python字符串常用方法（二）
二.字符串的操作常用方法 字符串的替换.删除.截取.复制.连接.比较.查找.分割等 1. string. lower() :转小写 2. string. upper() :转大写 3. string. ...
- 数据仓库建模对比： 比较表格和多维解决方案 (Comparing tabular and multidimensional solutions)
笔记记下来,划重点: https://docs.microsoft.com/zh-cn/sql/analysis-services/comparing-tabular-and-multidimensi ...
- Oracle集群时区
1.环境及问题 OS:SUSE 12SP3 DB:12.2.0.1.190115 2节点RAC Q:集群日志的时间和主机时间相差较大 grid@WWJD1:~> date Mon Feb 11 ...
- 简介一下 i++和++i&&i=i+i,i+=1;的区别
首先: int i=2; i++=2; ++i=3; 前者先显示当前的值,而后者则是先自增在显示值: second i=i+1和i+=1; 输出结果虽然一样,但是 1.byte i=2; i+=2; ...
- linux 下的OpenGL的安装配置
https://blog.csdn.net/qq_38228254/article/details/78521155 本人亲测有效
- luogu P1578 奶牛浴场
很好的一道题 王知昆爷爷的论文(讲的特别清楚) https://wenku.baidu.com/view/bc8311f69e314332396893f7.html 先贴上AC代码 #include& ...