vertical-align

起作用的前提：

1. 元素必须是 inline&inline- 水平元素或 table-cell 元素；这也意味着，默认情况下， div , p 等元素设置 vertical-align 无效
2. 值得注意的是：例如 float 和 position: absolute ，一旦设置了这两个属性之一，元素的 display 值被忽略，强制当成 block 方式处理，因此，vertical-align 也就失去了作用

text-align

元素是position：absolute/fixed，text-align失效
text-align属性是用来描述一个行内元素是如何在身为父元素的块级元素中对齐

通过定义可以看出text-align属性并不能控制块级元素的对齐方式，它只对块级元素内的行内元素生效

<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设置 text-align: center;
// p标签内部的内容设置text-align: center;是让p标签内部的内容水平对齐
.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

参考

https://juejin.im/post/6844904084885995528