inline-block 实现元素垂直居中

时间 2019-11-13

标签 inline block 实现元素垂直居中繁體版

原文原文链接

1.元素的显示方式：css

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

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

display:block 表示，元素做为块级元素显示，两个或者多个块级元素分红多行显示；常见的块级元素如：div, h1~h5 标签；块级元素的特色是：能够给元素设置宽高，元素独占一行；浏览器

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

2. 对于vertical-align：code

　　支持程度：全部浏览器都支持 vertical-align 属性（包括 IE8）htm

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

　　可能的取值方式:it

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

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

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

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

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

因此为了使得元素相对于父级元素垂直居中，咱们能够把元素的 display 属性设定为 inline-block;同时把元素的 vertical-align 属性值设定为 middle;

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

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

能够采起样式：

.father {
	height: 100px;
	width: auto;
}
/* 
	将 after 伪元素添加到father内容元素后面，而后用 after 伪元素把 内容撑开到和父级元素同高；
 */
.father:after {
	font-size: 0;
	/*内容为空*/
	content: ""; 
	/*高度为父级元素的100%*/
	height: 100%;
}

.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% 的时候，其余同级元素就相对于父级元素居中了.