如何使头像标签文本与头像图片垂直居中对齐？

要实现头像和旁边的标签文本垂直居中，核心是给每个包含头像与文本的flex子容器添加items-center类，具体修改如下：

原因说明 #

• 你之前给文本所在div加justify-center是控制文本内部的水平对齐，和垂直方向的对齐无关，所以没效果。
• 每个头像+文本的组合是一个独立的flex容器（.flex类的div），默认flex布局下子元素是顶部对齐，给这个容器加上items-center后，会让交叉轴（垂直方向）上的子元素（头像和文本div）居中对齐。

修改后的完整代码 #

<div class="flex flex-wrap">
  <div class="flex mr-8 items-center">
    <div class="rounded-full overflow-hidden w-24 h-24">
      <img
        src="https://via.placeholder.com/150"
        alt="Avatar"
        class="w-full h-full object-cover"
      />
    </div>
    <div class="ml-4">
      <span class="text-lg font-bold block text-gold">Avatar 1</span>
      <span class="text-lg text-right text-black">Additional Text 1</span>
    </div>
  </div>
  <div class="flex items-center">
    <div class="rounded-full overflow-hidden w-24 h-24">
      <img
        src="https://via.placeholder.com/150"
        alt="Avatar"
        class="w-full h-full object-cover"
      />
    </div>
    <div class="ml-4">
      <span class="text-lg font-bold block text-gold">Avatar 2</span>
      <span class="text-lg text-right text-black">Additional Text 2</span>
    </div>
  </div>
</div>

如果需要让文本内部的两行文字也垂直居中，可以给文本所在的div加上flex flex-col justify-center，这样文本块内部的两行文字会在垂直方向上居中分布，适配不同高度的头像。

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