如何实现头像与个人资料名称、描述的对齐布局？附代码及效果参考

调整思路 #

你要的布局是左侧显示圆形头像，右侧垂直排列个人名称和描述文本，整体包裹在带有圆角的浅蓝色背景容器内。用Flexbox来实现最稳妥，比原来靠负margin偏移的方式更可靠，布局也不容易错乱。

修改后的完整代码 #

CSS 样式 #

.main_content_box{
  height: 58px;
  background-color: #CEE0F9;
  border-radius: 25px 25px 30px 30px;
  /* 开启Flex布局，水平排列元素且垂直居中 */
  display: flex;
  align-items: center;
  /* 头像与文本区域的间距 */
  gap: 12px;
  /* 左右内边距，避免内容贴容器边缘 */
  padding: 0 16px;
  font-size: 19px;
}

/* 圆形头像样式 */
.icon{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #fff; /* 可根据需求替换头像背景色 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* 文本容器，垂直排列名称和描述 */
.profile-text-group{
  display: flex;
  flex-direction: column;
  /* 名称与描述的间距 */
  gap: 2px;
}

.profile-name{
  font-size: inherit;
}

.profile-desc{
  text-transform: capitalize;
  font-size: 14px;
  color: #666; /* 可选：给描述加浅灰色，与名称区分开 */
}

HTML 结构 #

<div class="main_content_box">
  <div class="icon">
    {{ P }}
  </div>
  <div class="profile-text-group">
    <span class="profile-name">{{ Name }}</span>
    <div class="profile-desc">个人资料描述</div>
  </div>
</div>

关键调整说明 #

1. 用Flexbox重构.main_content_box布局，替代原有的text-align: center和负margin，元素对齐更精准可控；
2. 给头像设置固定宽高与圆形样式，确保呈现预期的圆形头像效果；
3. 将名称和描述放入统一文本容器，通过垂直Flex布局实现上下排列，用gap控制间距，比内联margin更整洁易维护；
4. 移除所有内联样式，统一用类选择器管理样式，后续修改更方便。

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