vertical-align

起作用的前提：

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

text-align

1. 元素是position：absolute/fixed，则text-align失效

2. text-align属性是用来描述一个行内元素是如何在身为父元素的块级元素中对齐；也就是说如果需要行内元素水平对齐，需要给其父元素设置text-align

3. 通过定义可以看出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;
  }
}

参考

juejin.cn/post/684490…