HTML/CSS如何对齐四个inline-block链接盒子 修复Coming Soon盒子错位问题

错位核心原因 #

• 带display: inline-block属性的元素，默认垂直对齐逻辑是跟随内部文本的基线位置对齐，而非按照盒子自身的边缘对齐，这个规则对新手很不友好，只要盒子内部的文本位置有高低差，哪怕四个盒子的宽高、边距完全一致，也会出现上下错位，严重时甚至会把最后一个盒子挤到下一行。
• 代码里四个盒子的内部，文本基线的高度差非常大：
  • 前三个盒子里的.title设置了padding-top:220px，把文本推到了接近250px高盒子的底部，基线位置很低
  • 最后一个盒子里的#coming-soon设置了padding:50px 20px，文本位置偏上，基线位置很高
• 还有冗余的无效样式：#coming-soon重复设置了和父级.review4完全一样的灰色背景，多余的样式会增加布局计算的偏差概率。

可直接落地的修复步骤 #

1. 给.box类新增vertical-align: top属性，强制所有盒子按照自身的顶部边缘对齐，从根源上摆脱文本基线对齐的影响：

   .box {
       display: inline-block;
       width: 250px;
       height: 250px;
       margin: 20px;
       vertical-align: top; /* 新增的核心对齐属性 */
       background-size: cover;
       background-position: center top;
       background-repeat: no-repeat;
   }
   

2. 删掉#coming-soon里硬编码的padding值，改用更稳定的方式实现文本居中，避免padding超出固定盒子的尺寸造成布局偏移：
   推荐用Flex方案，改动最少、效果最稳定：

   .review4 {
       background-color: grey;
       display: inline-flex; /* 保留原有inline元素的排版特性 */
       align-items: center; /* 让内部文本垂直居中 */
       justify-content: center; /* 让内部文本水平居中 */
   }
   
   .review4 #coming-soon {
       font-family: Helvetica;
       font-size: 50px;
       color: white;
       margin: 0;
       /* 删掉原来冗余的text-decoration、重复的灰色背景、硬编码的padding */
   }
   

   如果需要兼容更老的浏览器，也可以用绝对定位实现居中，效果一致：
   先给.box类加相对定位属性：

   .box {
       /* 保留之前的所有属性，新增相对定位 */
       position: relative;
   }
   

   再重写#coming-soon的样式：

   .review4 #coming-soon {
       font-family: Helvetica;
       font-size: 50px;
       color: white;
       margin: 0;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 100%;
   }
   

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