inline-block 配合伪元素实现元素垂直居中

最新推荐文章于 2024-05-12 14:58:21 发布

憨逗君

最新推荐文章于 2024-05-12 14:58:21 发布

阅读量2.6k

点赞数 3

原文链接：https://www.cnblogs.com/pandoraCat/p/4462050.html

版权

inline-block 实现元素垂直居中

1.元素的显示方式：

1 　　 display:inline;
3     display:linline-block; 
5 　　 display:block

display:inline 表示，元素做为内联元素显示，两个或者多个内联元素可以并列成一行显示；常见的内联元素如：span strong 标签；内联元素的特点是：(1)不能给内联元素设置宽和高；(2)元素和其他元素共占一行;

display:block 表示，元素作为块级元素显示，两个或者多个块级元素分成多行显示；常见的块级元素如：div, h1~h5 标签；块级元素的特点是：可以给元素设置宽高，元素独占一行；

display:inline-block,元素作为内联元素显示，在父级元素宽度足够的情况下，两个或者多个inline-block 元素并列成一行显示；inline-block 的元素可以设置宽高；

2. 对于vertical-align：

　　支持程度：所有浏览器都支持 vertical-align 属性（包括 IE8）

作用：该属性定义行内元素的基线相对于该元素所在行（父级元素）的基线的垂直对齐方式。

　　可能的取值方式:

　　baseline：元素的基线放置在父级元素的基线上；（vertical-align 属性的默认值是 baseline）；

text-top/text-bottom：把元素的底端垂直与父元素的文本的顶端/底端对齐；

top：把元素的顶端与行中最低的元素的顶端对齐。

bottom：把元素的顶端与行中最低的元素的顶端对齐。【注意，top/bottom 对应的边界是父级元素的border 的内边界】

middle：把元素相对于父级元素垂直居中；

所以为了使得元素相对于父级元素垂直居中，我们可以把元素的 display 属性设定为 inline-block;同时把元素的 vertical-align 属性值设定为 middle;

3. 如何元素相对于父级元素居中:

<div class="father">

<div class="son son1"></div><br>　　　　 <div class="son son2"></div>

</div>

可以采取样式：

.father {

height: 100px;

width: auto;

}

/*

将 after 伪元素添加到father内容元素后面，然后用 after 伪元素把内容撑开到和父级元素同高；

*/

<strong>.father:after {

font-size: 0;

/*内容为空*/

content: "";

/*高度为父级元素的100%*/

height: 100%;

}</strong>

.son {

/*显示为内联元素*/

display: inline-block;

/*对齐方式为居中*/

vertical-align: middle;

}

原理是什么呢？我们可以通过下面的一个 demo 来的得到。

复制代码

<html>
<head>
    <style>
    div {
        position: relative;    
        font-size: 0;
    }
    .outer {
        height: 100px;
        width: 200px;
        background: #FF0;
    }
    .inner {
        width: 25%;
        display: inline-block;
        vertical-align: middle;
    }
    .inner1 {
        height: 20px;
        background: #010;
    }
    .inner2 {
        background: #202;
        height: 40px;
    }
    .inner3 {
        background: #103;
        height: 60px;
    }
    .inner4 {
        background: #401;
        height: 80px;
    }

    .father {
        height: 100px;
        width: 100px;
        background: red;
    }
    .son {
        height: 50px;
    }
    /*.outer:after {
        font-size: 0;
        display: inline-block;
        content: "";
        position: relative;
    }*/
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
        <div class="inner inner4">4</div>
    </div>
</body>
</html>

复制代码

代码运行后的排版：

display:inline-block；vertical-align：middle 的元素，元素是相对于同级最高的元素（撑开的区域居中的）；所以当我们把　after 伪元素设置高度：height：100% 的时候，其他同级元素就相对于父级元素居中了.

憨逗君

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
inline-block 配合伪元素实现元素垂直居中

inline-block 实现元素垂直居中1.元素的显示方式：1 　　 display:inline;3 display:linline-block; 5 　　 display:block display:inline 表示，元素做为内联元素显示，两个或者多个内联元素可以并列成一行显示；常见的内联元素如：span strong 标签；内联元素的特点是：(1)不能给内联元素设置宽和高；(2)元素和其他元素共占一行; display:block 表示，元素作为块级元素显示，...
复制链接

扫一扫