文并非介绍line-height的四条线,也不说它是如何继承的
Demo
在 PC 端,为了实现文字居中, 我们这样写 CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin:0;
padding: 0;
}
.box {
width: 500px;
height: 200px;
line-height: 200px;
border:1px solid orange;
text-align: center;
color:black;
}
</style>
</head>
<body>
<div class="box">
测试
</div>
</body>
</html>
好,很好,非常好,简简单单就实现了文字居中,可喜可贺 咦! 我为啥要写border属性呢?无所谓啦,这种事随它去吧 真的是无所谓么 有时在移动端我们会加上这个属性
box-sizing:border-box;
看起来没有什么不一样啊! 让我修改一下border
border:50px solid black;
这他么什么鬼,画风完全不对好吧 这时候只需要将更改
line-height: 100px;
文字就再次居中了
让我恢复到原来的属性然后加上
padding:50px 0;
花还香香的 再来一条
box-sizing:border-box;
... 这时候也需要更改
line-height:98px;
哦!!! 不管你们懂不懂,反正我是懂了
我们都知道当 height 与 line-height 的高度相等的时候文字会垂直居中 ,这个 height 指的得是盒模型的 content 部分,不包括 padding 与 border
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
