如何在Laravel Breeze中使用Tailwind CSS实现图片与文字水平对齐

修复方案 #

你需要给包裹图片和文字的<a>标签添加 flex 布局相关的 Tailwind 类，实现横向排列+垂直居中对齐，修改后的完整代码如下：

<div class="mb-10 mx-auto w-full max-w-sm fixed top-4 left-6 inline-block">
  <div>
    <!-- 新增flex、items-center、gap类实现横向对齐 -->
    <a href="" class="flex items-center gap-3">
      <img src="../Assets/Img/logo.svg" class="h-10 w-10" alt="">
      <div class="space-y-2 text-left">
        <p class="font-bold text-purple-700 text-2xl">Vuexy</p>
      </div>
    </a>
  </div>
</div>

新增类说明 #

• flex：将元素设置为弹性容器，直接子元素默认横向排列，不会自动换行
• items-center：让子元素在垂直方向居中对齐，保证图片和文字高度方向对齐
• gap-3：设置图片和文字之间的横向间距，可根据视觉需求调整为gap-2、gap-4等其他数值

之前的代码没有指定容器的布局规则，<img>和后续的<div>默认是上下排列，所以出现了换行，和内部的<p>标签无关。

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