如何在tailwindcss中的浮動圖像旁邊居中文本

Question

嗨，我試圖在具有浮動屬性的圖像旁邊垂直居中 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>

Answer 1

一種更現代的方法是使用 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>