CODEWITHSUNDEEP
htmltailwind-css
user15356687
user15356687

Reputation:

How to center text next to an float image in tailwindcss

Hi im trying to center 2 lines of text vertical next to an image that has an float propertie im using tailwindcss for my styling has anyone any idea how do this

    <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>

Upvotes: 0

Views: 5301

Answers (2)

Michael Brenndoerfer
Michael Brenndoerfer

Reputation: 4066

The same answer but a more simple example:

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

Upvotes: 4

El Devoper
El Devoper

Reputation: 1093

A more modern approach is using flexbox instead of floats. Just add the classes flex and items-center to the parent and let flexbox do it's magic.

<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>

Upvotes: 3

Related Questions