why? 为啥我要写这个?
有一说一,挺好奇的,对于这种最最基础的问题,我觉得应该要有最最朴实准确的答案。
是文字本身撑开的?试验才是检验真理的唯一标准。
![df2c9e5755779707564e4da7f0ff9f82.png](https://i-blog.csdnimg.cn/blog_migrate/37d67c3c12a1250dee47e7600f875f21.jpeg)
图1当中的 代码如下所示
<!DOCTYPE html>
很简单的控制变量,我们能看到肯定不是文字本身的大小撑起来div
再做个试验
![bf1f7ee5d002227e803e99e0499d8476.png](https://i-blog.csdnimg.cn/blog_migrate/7bd30868bdc4d6d6cc7a6c621c590659.png)
图二当中的代码如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
.text1 {
border: 1px solid red;
font-size: 20px;
line-height: 0;
}
.text2 {
margin-top: 100px;
border: 1px solid blue;
font-size: 0;
line-height: 20px;
}
</style>
<body>
<div class="text1">测试1是高度撑开了div吗?</div>
<div class="text2">测试2 那到底是什么撑开的div呢? </div>
</body>
</html>
虽然没有文字,但是div依旧不是空的,而且我们并没设置height,那么可以确定是line-height撑起了整个的高度
在css中能撑起来元素高度的由两个属性组成 line-height height
line-height?
what?这是啥?
line-height是设置行高的的属性,本文不会完整的科普line-height,只会挑几个比较重要的点来分享。
line-height可以继承吗?
会,但是只是在当前元素没有line-height属性时才会继承父元素的
line-height设置大小的时候是相对于与谁设置的大小呢?
line-height 百分数是基于当前字体尺寸的百分比行间距,换句话来说,如果此时font-size为0,会有下面的结果
- 文字看不见
- 此时line-height如果设置为1,那么计算得到的line-height也是0,就所有的都看不到咯。能看到的只有border的一条线。
把line-height值设置为height一样大小的值可以实现单行文字的垂直居中是真的吗?
是真的,但是描述不准确,准确的描述是““把line-height设置为您需要的box的大小可以实现单行文字的垂直居中”
简单来说在想要在div或者p居中的时候,只需要把line-height设置成你想要的高度就ok了,不需要设置height
举个栗子
![1d5610b8c3b79edff622ffad6863ab07.png](https://i-blog.csdnimg.cn/blog_migrate/418500817878e3f9b4f600ca05995d03.jpeg)
可以看图3当中的测试3
下面是对应的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
.text1 {
border: 1px solid red;
font-size: 20px;
line-height: 0;
}
.text2 {
margin-top: 100px;
border: 1px solid blue;
font-size: 0;
line-height: 20px;
}
.text3 {
margin-top: 100px;
border: 1px solid blue;
line-height: 120px;
}
</style>
<body>
<div class="text1">测试1是高度撑开了div吗?</div>
<div class="text2">测试2 那到底是什么撑开的div呢? </div>
<div class="text3">测试3 这个是一个居中而且没有height的测试,能成功吗? </div>
</body>
</html>
可以明显的注意到class=text3的已经明显居中了,但是实际上并没有设置height
注意:这个是单行元素能这样玩,如果是多个段落不能这样玩,会出大事情.
那多行而且是段落怎么办呢?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style>
.text1 {
border: 1px solid red;
font-size: 20px;
line-height: 0;
}
.text2 {
margin-top: 100px;
border: 1px solid blue;
font-size: 0;
line-height: 20px;
}
.text3 {
margin-top: 100px;
border: 1px solid blue;
line-height: 120px;
}
.text4 {
margin-top: 100px;
border: 1px solid blue;
line-height: 150px;
height: 150px;
display: table;
}
.text41 {
display: table-cell;
vertical-align: middle;
}
</style>
<body>
<div class="text1">测试1是高度撑开了div吗?</div>
<div class="text2">测试2 那到底是什么撑开的div呢? </div>
<div class="text3">测试3 这个是一个居中而且没有height的测试,能成功吗? </div>
<div class="text4">
<div class="text41">
<p class="textp1">测试4 这个是一个居中而且没有height的测试,能成功吗?11</p>
<p class="textp1">测试4 这个是一个居中而且没有height的测试,能成功吗?22</p>
</div>
</div>
</body>
</html>
比较常见的方案两种:
1.外部包一个table,使用table布局,里面使用table-cell+vertical-align:middle,虽然丑,但是确实有效.
2. flex (不谈了,不懂得可以去查一下)
其他的方法或多或少的有一些小问题,如果有新的方法,欢迎补充。
ps:line-height的一些需要注意注意的点
- line-height可以设置百分比,也可以设置具体的大小
- 一般在试验当中,line-height设置为文字大小的1.4倍,整体看起来会比较合适
- 虽然ine-height可以使用任何的css的单位,但是最佳实践是使用数字而不带单位的行高,主要是继承问题,可能会影响到子元素的布局
- line-height仅对内联元素有效,将inline-block或非内联的其他任何元素时效果仅仅作用于inline的后代元素