关于line-height

关于line-height

http://img1.sycdn.imooc.com//climg/5bc2c2e80001c81d15010844.jpg
block-more直接设置line-height为55px
元素有高度而且就垂直居中了,效果好像和设置width:55px line-height:55px是一样的,这算是一个技巧吗?

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

因为没有设置高度,直接设置了line-height,会将盒子撑开,此时撑开的高度就是line-height的高度,就可以实现垂直居中显示的效果了,同学这里疏忽打错了哦~效果和设置height:55px;line-height:55px;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
举个栗子:
<!DOCTYPE html>
 
<html>
 
<head>
 
<meta charset="UTF-8">
 
<title>display属性</title>
 
<style type="text/css">
.two {
line-height: 55px;
}
</style>
 
</head>
 
<body>
 
<div class="one">
<div class="two">
two
</div>
</div>
 
</body>
 
</html>

控制台效果如下:

http://img1.sycdn.imooc.com//climg/5bc3f488000178d106080177.jpg

祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码