html垂直居中效果实现的集中方式及区别

s007easy

已于 2023-07-12 17:05:22 修改

阅读量84

点赞数

文章标签： html 前端

于 2023-07-12 11:31:26 首次发布

本文链接：https://blog.csdn.net/s007easy/article/details/131677698

版权

块内元素的居中效果：

line-height属性设置行间的距离（行高）。

该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离。line-height 与 font-size 的计算值之差分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。

normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

应用场景：一般用于快内元素中嵌套行内元素，行内元素设置line-height属性，使行内元素内容相对于快内元素居中。

vertical-align 属性设置元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。（属于当前行内居中，当父级设置高时vertical-align不能达到整体居中的效果，只能用line-height实现）

baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

应用场景：用于行内居中（父级设置行高时，需line-height设置居中），也可用于表格内元素的对齐

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            background-color: aqua;
            width: 200px;
            height: 100px;
            vertical-align: middle;
            margin-bottom: 20px;

        }

        .f {
            background-color: aqua;
            height: 100px;

            margin-bottom: 20px;

        }

        .b {
            line-height: 100px;
        }

        .c {
            line-height: 100px;
        }

        .d {
            vertical-align: middle;
        }

        .e {
            vertical-align: middle;
        }

        .g {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="a">
        <span class="b">行内元素，line-height有效</span>
    </div>
    <div class="a">
        <div class="c">块级元素，line-height有效</div>
    </div>
    <div class="f">
        <img src="img/logo.png" alt="">
        <div class="d">块级元素，vertical-align无效</div>
    </div>
    <div class="f">
        块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素<img
            class="g" src="img/logo.png" alt=""><span class="e">行内元素，vertical-align无效</span>
    </div>
</body>

</html>