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的默认 ...
随机推荐
- 第七周 ip通信基础回顾
H3C的配置指令包括:基本配置,查看指令,接口配置. 基本配置包括:查看可用指令:进入系统视图,全局配置模式:给设备命名:退回上一层模式:直接退回到用户模式. 查看指令包括:显示设备系统版本信息:显示 ...
- vue 使用
[1_01 vue的双向绑定] [1_02 Vue Slot] [vue实例属性template不能使用] [vue-property-decorator 提供 OO 的风格 Vue Componen ...
- Nginx与PHP-FPM运行原理详解
目录 1. 代理与反向代理 1. 正向代理:访问google.com 2. 反向代理:通过反向代理实现负载均衡 2. 初识Nginx与PHP-FPM 1. Nginx是什么 2. CGI与FastCG ...
- Percona-Toolkit 之 pt-table-checksum 总结
pt-table-checksum - Verify MySQL replication integrity. pt-table-checksum performs an online replica ...
- KubeCon + CloudNativeCon论坛2019上海
2019年,KubeCon + CloudNativeCon和Open Source Summit在将在中国共同举办一场活动. In 2019, KubeCon + CloudNativeCon an ...
- 1231: ykc买零食
1231: ykc买零食时间限制: 1 Sec 内存限制: 128 MB 题目描述 ykc的班级准备举行班级聚会,而身为生活委员的ykc要为此准备好零食,这天,ykc来到了学校的新起点超市,在转了3 ...
- Pyenv部署
一.Git克隆方式 1.安装git yum -y install git 2.克隆pyenv到本地 git clone https://github.com/pyenv/pyenv.git ~/.py ...
- PAT (Basic Level) Practice （中文）1023 组个最小数
1023 组个最小数 给定数字 0-9 各若干个.你可以以任意顺序排列这些数字,但必须全部使用.目标是使得最后得到的数尽可能小(注意 0 不能做首位).例如:给定两个 0,两个 1,三个 5,一个 8 ...
- 前端学习历程--vue
---恢复内容开始--- 一.对比其他框架 1.react: 共同点: 使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件. 将注意力集中保持在核 ...
- 灵雀云获邀加入CDF（持续交付基金会），成为中国区三大创始成员之一
3月12日,在加州Half Moon Bay举行的开源领导者峰会(Open Leadership Summit 2019 )上,CDF(Continuous Delivery Foundation ) ...