文本量不同的矩形水平对齐异常，求前端解决方法

方案一：调整垂直对齐方式 #

问题根源是inline-block元素默认采用基线对齐，即便设置了固定宽高，文本内容较少的元素仍会与其他元素的基线对齐，导致视觉错位。只需给三个带ID的.quote子元素添加vertical-align: top;即可修复：

修改后的CSS代码：

.quote {
  text-align: center;
  margin-bottom: 30px;
}

.quote #quote-1,
.quote #quote-2,
.quote #quote-3 {
  font-size: large;
  text-align: center;
  width: 348.641px;
  height: 84px;
  border: 1px solid black;
  display: inline-block;
  padding: 30px;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 0px;
  vertical-align: top; /* 添加垂直对齐规则 */
}

.quote a:link,
.quote a:visited {
  color: #000000;
  background-color: transparent;
  text-decoration: none;
}

.quote a:hover {
  color: #6200ff;
  background-color: transparent;
  text-decoration: underline;
}

方案二：改用Flex布局（更简洁稳定） #

如果想彻底规避这类对齐问题，推荐用Flex布局重构父容器，代码更简洁且对齐逻辑更可靠：

修改后的CSS代码：

.quote {
  display: flex; /* 启用Flex布局 */
  justify-content: center; /* 水平居中排列子元素 */
  gap: 30px; /* 替代左右margin，统一控制元素间距 */
  margin-bottom: 30px;
}

.quote #quote-1,
.quote #quote-2,
.quote #quote-3 {
  font-size: large;
  text-align: center;
  width: 348.641px;
  height: 84px;
  border: 1px solid black;
  padding: 30px;
}

.quote a:link,
.quote a:visited {
  color: #000000;
  background-color: transparent;
  text-decoration: none;
}

.quote a:hover {
  color: #6200ff;
  background-color: transparent;
  text-decoration: underline;
}

HTML无需改动，Flex布局会自动让所有子元素顶部对齐，同时简化了间距控制逻辑。

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