inline-block 实现元素垂直居中

原文地址：https://www.cnblogs.com/pandoraCat/p/4462050.html

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. 如何元素相对于父级元素居中:    

1
2
3
<div class="father">
    <div class="son son1"></div><br>　　　　 <div class="son son2"></div>
</div>

可以采取样式： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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% 的时候，其他同级元素就相对于父级元素居中了.

posted @ 2019-08-02 11:34  鳳舞九天  阅读(2297)  评论(0)    收藏  举报