图片与文本对齐异常及display:inline-block属性使用问题求助

问题1：第一个文本在图片下方，其余在图片旁的原因 #

第一个承载文本的<div>没有添加imbutton类，浏览器默认块级元素（display:block）会独占一行，因此自动换行到图片下方；而后续的<div>都添加了imbutton类，设置了display:inline-block，会和同为inline-block的图片在同一行显示，最终导致显示效果不一致。

问题2：inline-block概念与目标布局实现 #

inline-block核心特性 #

display:inline-block的元素同时具备块级元素和行内元素的特点：

• 支持设置宽高（块级元素特性）
• 不会独占一行，可与其他行内/行内块元素在同一行排列（行内元素特性）

实现「元素水平排列+文本在图片下方」的布局 #

要达成这个效果，无需给图片和文本单独设置inline-block，只需让每个<a>标签作为独立的垂直卡片（图片在上、文本在下），再让所有卡片整体水平排列即可。具体修改如下：

修改后的HTML代码 #

<div className={styles.grid}>
 <a href="../pages/satweather.js">
  <img
   className={styles.img}
   src="weatherbutton.jpg"
   width="100"
   height="50"
   onclick="openModal();currentSlide(1)"> 
  </img>
  <div className={styles.imbutton}>→ SatWeather</div>
 </a>
 <a href="../pages/satsecurity.js">
  <img
   className={styles.img}
   src="securitybutton.jpg"
   width="100"
   height="50"
   onClick="openModal();currentSlide(1)"
  ></img>
  <div className={styles.imbutton}>→ SatSecurity</div>
 </a>
 <a href="../pages/photovideo.js">
  <img
   className={styles.img}
   src="satbutton.jpg"
   width="100"
   height="50"
   onClick="openModal();currentSlide(1)"
  ></img>
  <div className={styles.imbutton}>→ Photo/Video</div>
 </a>
 <a href="../pages/satagriculture.js">
  <img
   className={styles.img}
   src="farmbutton.jpg"
   width="100"
   height="50"
   onClick="openModal();currentSlide(1)"
  ></img>
  <div className={styles.imbutton}>→ SatAgriculture</div>
 </a>
 <a href="../pages/satanimal.js">
  <img
   className={styles.img}
   src="animalbutton.jpg"
   width="100"
   height="50"
   onClick="openModal();currentSlide(1)"
  ></img>
  <div className={styles.imbutton}>→ SatAnimal</div>
 </a>
</div>

（注：给第一个文本的<div>补上了imbutton类，同时修正了href路径的反斜杠为正斜杠，避免路径解析错误）

修改后的CSS代码 #

/* 每个a标签作为独立垂直卡片 */
.grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 10px; /* 控制卡片间的水平间距 */
  text-decoration: none; /* 可选：移除a标签默认下划线 */
}

.img {
  margin: 10px 0; /* 调整图片与下方文本的间距 */
}

.imbutton {
  text-align: center;
}

.grid {
  display: flex;
  max-width: 800px;
  flex-wrap: wrap; /* 可选：宽度不足时自动换行 */
  justify-content: flex-start; /* 可选：控制卡片整体的水平对齐方式 */
}

代码说明 #

1. 给每个<a>设置display:flex+flex-direction:column，让内部图片和文本垂直排列，align-items:center保证内容居中显示；
2. 移除.img的display:inline-block，flex布局下无需该设置；
3. 添加flex-wrap:wrap避免小屏幕下内容溢出；
4. 统一所有文本的类名，保证样式一致性。

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