vertical-align
起作用的前提：
- 元素必須是 inline&inline- 水平元素或 table-cell 元素；這也意味著，默認(rèn)情況下翘魄， div , p 等元素設(shè)置 vertical-align 無效
- 值得注意的是：例如 float 和 position: absolute 氓仲，一旦設(shè)置了這兩個屬性之一，元素的 display 值被忽略湿颅，強制當(dāng)成 block 方式處理，因此粥诫，vertical-align 也就失去了作用
text-align
元素是position：absolute/fixed油航，text-align失效
text-align屬性是用來描述一個行內(nèi)元素是如何在身為父元素的塊級元素中對齊
通過定義可以看出text-align屬性并不能控制塊級元素的對齊方式，它只對塊級元素內(nèi)的行內(nèi)元素生效
<div class="learning-materials">
<div class="materials-item course-info">
<img src="" alt="" />
<p>xxxxxx</p>
</div>
<div class="materials-item sign">
<img src="" alt="" />
<p>xxxxxxx</p>
</div>
<div class="materials-item stage-report">
<img src="" alt="" />
<p>xxxxxxxx</p>
</div>
<div class="materials-item wechat">
<img src="" alt="" />
<p>xxxx</p>
</div>
</div>
// 注意img的居中是給materials-item設(shè)置 text-align: center;
// p標(biāo)簽內(nèi)部的內(nèi)容設(shè)置text-align: center;是讓p標(biāo)簽內(nèi)部的內(nèi)容水平對齊
.materials-item {
width: 25%;
text-align: center;
img {
width: 64px;
height: 64px;
}
p {
margin-top: 6px;
font-size: 24px;
font-weight: 400;
text-align: center;
color: #a6a9ac;
line-height: 34px;
}
}
image.png
