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

Question

您好，我尝试将两行文本垂直居中放置在一个具有浮动属性的图像旁边。我使用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>

Answer 1

更现代的方法是使用flexbox而不是floats。只需将类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>

Answer 2

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

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