HTML/CSS元素对齐问题求助：如何将文本置于指定元素下方

问题核心 #

当前oliver与the popular cat因都设置为inline-block，导致和图片处于同一水平行。要实现文字垂直堆叠，需将两个文本元素放入同一容器，再让该容器与图片、关注按钮横向排布。

修改后的完整代码 #

HTML

<div class="container">
  <img class="picture" src="/Users/riyazmohamed/Desktop/HTML-CSS/Intro-to-html/channel-picture/cat.jpeg" alt="cat" />
  <!-- 新增容器包裹两个文本，实现垂直堆叠 -->
  <div class="name-group">
    <p class="oliver">oliver</p>
    <p class="popular">the popular cat</p>
  </div>
  <div class="follow-div">
    <button class="follow-button">Follow</button>
  </div>
</div>

CSS

.container {
  display: flex; /* 用flex实现横向布局，比inline-block更易控制 */
  align-items: center; /* 所有子元素垂直居中 */
  width: 280px; /* 调整宽度适配所有元素 */
  height: 120px;
  gap: 10px; /* 统一设置元素间距，替代零散margin */
}

.picture {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.name-group {
  display: flex;
  flex-direction: column; /* 内部文本垂直排列 */
  gap: 4px; /* 两个文本之间的间距 */
}

.oliver {
  font-weight: bold;
  margin: 0; /* 清除p标签默认边距 */
}

.popular {
  font-size: 15px;
  color: #666;
  margin: 0; /* 清除p标签默认边距 */
}

.follow-button {
  width: 90px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 9px;
  background-color: #0f6fb0;
  cursor: pointer;
  color: white;
  font-family: verdana;
}

.follow-div {
  margin-top: 0; /* 移除不必要的margin */
}

关键改动说明 #

1. 结构调整：新增name-group容器包裹两个文本，确保它们在内部自然垂直排列。
2. Flex布局替代inline-block：给.container设置display: flex，轻松实现横向排布与垂直居中，避免inline-block的对齐问题。
3. 清除默认样式：移除p标签的默认margin，避免额外间距干扰布局。
4. 统一间距控制：用gap属性替代零散的margin设置，让布局更整洁易维护。

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