如何解决‘display:block属性导致align-items失效，请设置非block值’提示问题

问题原因 #

align-items是Flexbox（弹性盒）或Grid布局专属的容器属性，只有当元素被设置为弹性容器（display: flex/inline-flex）或网格容器（display: grid/inline-grid）时，这个属性才能发挥作用。如果元素是默认的block块级元素，不属于这两类布局容器，align-items自然不会生效。

解决方法 #

• 如果要使用Flex布局：把目标容器的display属性改为flex（块级弹性容器，占满整行宽度）或inline-flex（行内弹性容器，宽度由内容决定）。
  示例代码：

  .container {
    display: flex;
    align-items: center; /* 此时该属性正常生效 */
  }
  

• 如果要使用Grid布局：把目标容器的display属性改为grid（块级网格容器）或inline-grid（行内网格容器）。
  示例代码：

  .container {
    display: grid;
    align-items: center; /* 此时该属性正常生效 */
  }
  

• 如果不需要Flex/Grid布局：如果只是想对齐块级元素内的内容，直接用更合适的属性即可：

  • 对齐文本或行内元素：用text-align: center/left/right
  • 让子块级元素水平居中：给子元素设置margin: 0 auto
    示例代码：

  /* 对齐行内内容 */
  .block-box {
    text-align: center;
  }
  
  /* 子块级元素水平居中 */
  .child-box {
    width: 200px;
    margin: 0 auto;
  }
  

内容的提问来源于stack exchange，提问作者Shivansh Agarwal