阅读 5655

可恶,又学到了一点 CSS

昨天在做笔记整理的时候,看到一个面试题,如何实现水平垂直居中,虽然心里有一点点数,但是看到好几种答案,还是决定亲自动手验证一番,这验证一开始就出现了小问题,接着就像捅了个马蜂窝一样,各种疑惑扑面而来,而我又想弄清楚,折腾大半天,终于把问题锁定到了 line-heightvertical-align 身上。

大家现在应该都用 flex 布局,但是毕竟折腾好一会呢,好歹记录一下自己的收获哈哈

1.疑惑代码

    <div class="container">
        <div class="box">我要水平垂直居中</div>
    </div>
复制代码
.container{
    border: 2px solid black;
    background-color: chartreuse;
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
}
.box{
    display: inline-block;
    line-height: normal;
    font-size: 1rem;
    vertical-align: middle;
    background-color: cornflowerblue;
}
复制代码

你别说,还真居中了:

image-20211004131103654.png

2.一些知识点

2.1 水平垂直对齐

有一些疑惑真的只是自己无知哈哈哈

  • text-align 不仅可以作用在文本,还可以对行内元素和行内块元素有效果,设置水平对齐方式
  • vertical-align 只对行内元素和行内块元素起作用,设置元素的垂直对齐方式

2.2 line-height

说来也蛮搞笑的,我对 line-height 的印象就是,当元素 height 等于 line-height 的时候,元素内部的文本就会垂直居中。但是昨天查资料的时候发现,这里面牵扯到了很多复杂的问题。

简单的和我一起学习一下吧,MDN 上边说的,line-height 可用于多行文本的间距或者是单行文本的高度等

看到这里大家可以去看一下,底下的两篇参考文章,得出以下结论:

  • 没给元素设置高度时,元素高度采用的是 line-height 的高度,这个属性具有继承性。也自带默认值,所以当你给一个没有设置高度的元素设置 line-height:0;,即使里面有文本,它也是会塌陷的。
  • 可以分为好几种盒子,当你设置 line-height 的时候,行内框是不会变化的,改变的是行距,它只由 font-size 的决定。这其实就是上边元素 height 等于 line-height 的时候,元素内文本会垂直居中的原因。
  • 取值为 number 时,line-heightnumber 乘以当前元素的 font-size,取 normal 时一般就是 number 为 1.2

3. 疑惑产生

喜欢东拆拆西拆拆的我发现,上边代码注释掉 vertical-align: middle; 效果并没有变化,依旧垂直居中着,但是将它改成 vertical-align: top; 又起到作用了如下:

image-20211004152748629.png

4.解决

真的,其实写博客之前我都没有理解为什么会出现这种怪异情况,但是写着写着就来灵感了,原来是这样哈哈哈

其实咱们把文字内容加一点,使它成为多行文本,效果就出来了,没注释掉 vertical-align: middle 的效果如下:

image-20211004153753934.png

注释掉了,就是这个样子,没有垂直居中:

image-20211004153832263.png

所以前面的只是巧合,因为是单行文本的原因,平衡上下行距,应该也不叫行距,应该就是为了平衡才会出现垂直居中的效果哦!

折腾大半天好像又解决了一个没啥用的小 bug 呢!哈哈哈哈。找资料的时候看到到处都是张鑫旭老师的 《css世界》 的身影,经受了拷打的我也是立马下单了,希望自己会去看,别白买哈哈哈。

参考:

真正的能理解CSS中的line-height,height与line-height

学习笔记css中的line-height

\

文章分类
前端
文章标签