css记忆知识点二

最新推荐文章于 2024-07-13 14:09:46 发布

我们一起学前端

最新推荐文章于 2024-07-13 14:09:46 发布

阅读量106

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_35577655/article/details/98477996

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、实现多行垂直居中

<!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>
          .outerView{
            
             border:1px solid red;
             
             line-height: 400px;
          }
          .innerView{
            display: inline-block;
            line-height: 20px;
            vertical-align: middle;
          }
    </style>
</head>
<body>
    <div class="outerView">
          <div class="innerView">
            因为内联元素默认都是基线对齐的，所以我们通过对.content 元素设置verticalalign:
            middle 来调整多行文本的垂直位置，从而实现我们想要的“垂直居中”效果。如果是
            要借助line-height 实现图片垂直居中效果，也是类似的原理和做法。
            细心的读者可能发现，上面我解释原理的时候，“垂直居中”这4 个字加了引号，莫非，
            这里的“垂直居中”又是“近似”？
          </div>
    </div>
</body>
</html>

备注：
（1）多行文字使用一个标签包裹，然后设置display 为inline-block。好处在于既能重置外部的line-height 为正常的大小，又能保持内联元素特性，从而可以设置vertical-align 属性，以及产生一个非常关键的“行框盒子”。我们需要的其实并不是这个“行框盒子”，而是每个“行框盒子”都会附带的一个产物—“幽灵空白节点”，即一个宽度为0、表现如同普通字符的看不见的“节点”。有了这个“幽灵空白节点”，我们的lineheight:120px 就有了作用的对象，从而相当于在.content 元素前面撑起了一个高度为120px 的宽度为0 的内联元素。
（2）因为内联元素默认都是基线对齐的，所以我们通过对.content 元素设置verticalalign:middle 来调整多行文本的垂直位置，从而实现我们想要的“垂直居中”效果。如果是要借助line-height 实现图片垂直居中效果，也是类似的原理和做法。