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% 的時候，其餘同級元素就相對於父級元素居中了.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。