如何在 Laravel 微风中的 tailwind-css 中水平对齐图像

Posted

技术标签:

【中文标题】如何在 Laravel 微风中的 tailwind-css 中水平对齐图像【英文标题】:How can I align image horizontally in tailwind-css in Laravel breeze 【发布时间】:2022-01-11 21:51:03 【问题描述】:

我正在尝试将一个 omg 与文本对齐,但标签 <p>打破了这一行。我想做这样的事情

但我的代码就是这样做的

,这就是我的代码:

       <div class="mb-10 mx-auto w-full max-w-sm fixed top-4 left-6 inline-block">
          <div >
            <a href="">
              <img src="../Assets/Img/logo.svg" class="h-10 w-10" >
              <div class="space-y-2 text-left">
                <p class="font-bold text-purple-700 text-2xl">Vuexy</p>
              </div>
            </a>
          </div>
        </div>

【问题讨论】:

【参考方案1】:

您可以将flex 实用程序类应用于您的a 元素。

<div class="mb-10 mx-auto w-full max-w-sm fixed top-4 left-6 inline-block">
  <a href="" class="flex">
    <img src="../Assets/Img/logo.svg" class="h-10 w-10 mr-4" >
    <p class="font-bold text-purple-700 text-2xl">Vuexy</p>
  </a>
</div>

【讨论】:

以上是关于如何在 Laravel 微风中的 tailwind-css 中水平对齐图像的主要内容,如果未能解决你的问题,请参考以下文章

Laravel 中的 Tailwind 3 给出:错误:PostCSS 插件 tailwindcss 需要 PostCSS 8

如何在 Laravel InertiaJS 中使用 VueJS 配置 Tailwind + Postcss

如何在 Laravel 5.8 上为 IE11 编译 vue.js 和 tailwind.js

使用 laravel 微风运行 npm 时出现节点错误

扩展变体在 Tailwind 2.0.2 和 Laravel 8 中不起作用

在 Tailwind CSS 和 Laravel 中添加字体