建議學(xué)習時長：30 分鐘
學(xué)習方式：了解
學(xué)習目標
- 能用 inline-block 來實現(xiàn)元素的水平居中榆浓，兩端對齊和垂直居中戚长。
詳細介紹
inline-block 是元素display屬性的一個值套利。 display 的值為 inline-block 的元素被稱為行內(nèi)塊級元素秋茫。
行內(nèi)塊級元素有這樣的特性：
- 和塊級元素一樣腺晾，能設(shè)置元素的寬邓线，高，垂直方向的間距毙沾。寬度如果不指定骗卜，則為內(nèi)部元素的框定愧旦。
- 外部排列方式和行內(nèi)元素一樣，是水平排列的暇榴。
可以用這個特性來進行布局器联。
下面是一些示例
多個元素在一行
HTML
<div class="ly">
<div class="ly__item">xxx</div>
<div class="ly__item">xxx</div>
<div class="ly__item">xxx</div>
<div class="ly__item">xxx</div>
</div>
CSS
.ly {
display: table; // For Android: Android doesn't fill in `inline-block` gaps. `display: table;` magic fills in them.
width: 100%;
font-size: 0 !important; // 讓空格，tab遍烦，回車之類空白的不占空間
}
.ly__item {
display: inline-block;
vertical-align: top;
font-size: medium; // 這只是示例俭嘁。可根據(jù)實際情況設(shè)置服猪。
}
多個元素水平居中對齊
.ly {
display: table;
width: 100%;
font-size: 0 !important;
text-align: center;
}
.ly__item {
display: inline-block;
vertical-align: top;
font-size: medium;
}
多個元素水平兩端對齊
.ly {
display: table;
width: 100%;
font-size: 0 !important;
text-align: justify;
}
.ly:after {
content: '';
width: 100%;
display: inline-block;
}
.ly__item {
display: inline-block;
vertical-align: top;
font-size: medium;
}
注意：如果元素之間如果沒有空格供填，回車之類的，兩端對齊會失效罢猪。如近她，用 Angular 的 ng-repeat 生成出來的元素之間就就沒有空格。
多個元素在一行膳帕，某個元素占據(jù)剩余部分
.ly {
display: table;
width: 100%;
font-size: 0 !important;
}
.ly__item {
display: table-cell;
font-size: medium;
}
// 給占據(jù)剩余部分的元素加該類名
.ly__item--fill {
width: 100%;
}
多個元素水平居右對齊
.ly {
display: table;
width: 100%;
font-size: 0 !important;
text-align: right;
}
.ly__item {
display: inline-block;
vertical-align: top;
font-size: medium;
}
多個元素垂直居中
.ly {
display: table;
width: 100%;
font-size: 0 !important;
}
.ly:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.ly__item {
display: inline-block;
vertical-align: middle;
font-size: medium;
}
常見問題
1 空白的問題
在設(shè)置inline-block的元素的父元素設(shè)置font-size: 0粘捎。
2 高度不一樣的元素，垂直方向不對齊
在設(shè)置inline-block的元素上設(shè)置vertical-align: top;
