Tailwind CSS logo centered

Question

I have the following fiddle:

https://jsfiddle.net/w5c36epd/

If you look closely you can see that the logo is not actually centered. I have tried different flexbox options such as:

<div class="flex-shrink-0 justify-center">
    <img class="h-64 w-64" src="../../assets/images/logo.svg" alt="Workflow logo">
</div>

but I can't seem to align it.

What am I missing?

Answer 1

Try these :

 1. Place-items : center;
 2. align-items : center;
 3. justify-content : center;

Answer 2

To keep the logo truly centered, you'll utilize flex-grow and flex-basis. The sides will use flex-grow: 1; and flex-basis: 0px;. This will keep the logo in the center and have the sides fill the rest of the space.

The tailwind classes are grow (docs) and basis-0 (docs) (Tailwind v3.4.0 as of typing this)

Fiddle: https://jsfiddle.net/vkfn5ewa/10/

Answer 3

The main idea is you need to make 3 section part using flex basis, basis has the size up-to 12 and you want to divide it by 3. left: basis-5/12, middle: basis-2/12, and right: basis-5/12.

jsfiddle: https://jsfiddle.net/7jgwcdvq/13/