如何在tailwindcss中的浮动图像旁边居中文本答案

【问题标题】：How to center text next to an float image in tailwindcss如何在tailwindcss中的浮动图像旁边居中文本
【发布时间】：2021-06-20 03:51:03
【问题描述】：

您好，我正在尝试将 2 行文本垂直居中放置在具有浮动属性的图像旁边，我使用 tailwindcss 作为我的样式有任何人知道如何做到这一点

    <div class="bg-gray-300">
        <div class="w-4/5 m-auto flex justify-between">
            <div class="overflow-auto w-3/5">
                <div>
                    <img class="float-left" src="https://listen.cmfm.nl/api/station/1/art/ce2f70d363f5d2f8a977d039-1614349843.jpg" width="80" alt="">
                </div>
                <div>
                    <p>Live DJ: <span>Auto-DJ</span></p>
                    <p>Huidige Nummer: <span>Anne-Marie - Ciao Adios</span></p>
                </div>
            </div>

            <div class="w-2/5 my-auto">
                <div class="float-right">
                    <button class="radio-button border-2 border-white rounded-3xl hover:text-gray-500"><i class="fas fa-play"></i></button>
                    <button class="radio-button border-2 border-white rounded-3xl hover:text-gray-500"><i class="fas fa-volume-down"></i></button>
                    <button class="radio-button border-2 border-white rounded-3xl hover:text-gray-500"><i class="fas fa-volume-up"></i></button>
                    <button class="radio-button border-2 border-white rounded-3xl hover:text-gray-500"><i class="fas fa-external-link-alt"></i></button>
                </div>
            </div>
        </div>
    </div>

【问题讨论】：

标签： html tailwind-css

【解决方案1】：

同样的答案，但一个更简单的例子：

<div class="flex items-center">
  <img width="48" height="48" src="/logo.png" alt="logo small" />
  <span>Aligned text</span>
</div>

【讨论】：

【解决方案2】：

一种更现代的方法是使用 flexbox 代替浮动。只需将 flex 和 items-center 类添加到父类，然后让 flexbox 发挥作用。

<div class="bg-gray-300">
  <div class="w-4/5 m-auto flex justify-between">
    <div class="overflow-auto w-3/5 flex items-center">
      <div>
        <img src="https://listen.cmfm.nl/api/station/1/art/ce2f70d363f5d2f8a977d039-1614349843.jpg" width="80" alt="">
      </div>
      <div>
        <p>Live DJ: <span>Auto-DJ</span></p>
        <p>Huidige Nummer: <span>Anne-Marie - Ciao Adios</span></p>
      </div>
    </div>

    <div class="w-2/5 my-auto">
      <div class="float-right">
        <button class="radio-button border-2 border-white rounded-3xl hover:text-gray-500"><i class="fas fa-play"></i></button>
        <button class="radio-button border-2 border-white rounded-3xl hover:text-gray-500"><i class="fas fa-volume-down"></i></button>
        <button class="radio-button border-2 border-white rounded-3xl hover:text-gray-500"><i class="fas fa-volume-up"></i></button>
        <button class="radio-button border-2 border-white rounded-3xl hover:text-gray-500"><i class="fas fa-external-link-alt"></i></button>
      </div>
    </div>
  </div>
</div>

【讨论】：