Search code examples
alignmenttailwind-cssright-align

Tailwind align svg to right in div

I am having trouble aligning a svg to the right in Tailwind. I have tried many variations but it either misses the svg completely or always puts it at the start of the div. I have set the background to yellow temporarily so I can see the div as the background is black.

<div class="bg-black w-full py-4 px-4 grid grid-cols-2 gap-2 mb-0">
    <div class=" w-1/2 grid grid-cols-4 gap-2">
        <div class="my-auto col-span-1"><img src="{{$img}}" style="{{addShadow()}}"></div>
        <div class="col-span-3 font-bold uppercase text-3xl text-stone-200 my-auto" style="font-family: 'Audiowide', cursive;">{{$siteName}}</div>
    </div>
    <div class="my-auto pr-4 text-white bg-yellow-200 items-right">
        <a href="/#" class="text-white" onclick="openNav()" >
        <img src="{{asset('svg/circleHamburger.svg')}}" class="text-white max-w-[30px] max-h-[30px]"></a>
    </div>
</div>

I have tried flex and its variations and justify-end but nothing works. Here is a screen shot of the div.

enter image description here

Solution

  • There are a myriad of options and techniques available. Here are a few to choose from:

    Float the <a> element to the right by applying float: right via the float-right class:

    <script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div class="bg-black w-full py-4 px-4 grid grid-cols-2 gap-2 mb-0">
    <div class=" w-1/2 grid grid-cols-4 gap-2">
        <div class="my-auto col-span-1"><img src="https://picsum.photos/30/30?" style="{{addShadow()}}"></div>
        <div class="col-span-3 font-bold uppercase text-3xl text-stone-200 my-auto" style="font-family: 'Audiowide', cursive;">{{$siteName}}</div>
    </div>
    <div class="my-auto pr-4 text-white bg-yellow-200 items-right">
        <a href="/#" class="text-white float-right">
          <img src="https://picsum.photos/30/30" class="text-white max-w-[30px] max-h-[30px]">
        </a>
    </div>
</div>

    Make the <a> element a block element that is as wide as the <img> within, and then apply margin-left: auto to push it to the right:

    <script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div class="bg-black w-full py-4 px-4 grid grid-cols-2 gap-2 mb-0">
    <div class=" w-1/2 grid grid-cols-4 gap-2">
        <div class="my-auto col-span-1"><img src="https://picsum.photos/30/30?" style="{{addShadow()}}"></div>
        <div class="col-span-3 font-bold uppercase text-3xl text-stone-200 my-auto" style="font-family: 'Audiowide', cursive;">{{$siteName}}</div>
    </div>
    <div class="my-auto pr-4 text-white bg-yellow-200">
        <a href="/#" class="block w-max ml-auto text-white">
          <img src="https://picsum.photos/30/30" class="text-white max-w-[30px] max-h-[30px]">
        </a>
    </div>
</div>

    Make the parent <div> a horizontal flex layout and then justify the flex children to the end of the main axis:

    <script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div class="bg-black w-full py-4 px-4 grid grid-cols-2 gap-2 mb-0">
    <div class=" w-1/2 grid grid-cols-4 gap-2">
        <div class="my-auto col-span-1"><img src="https://picsum.photos/30/30?" style="{{addShadow()}}"></div>
        <div class="col-span-3 font-bold uppercase text-3xl text-stone-200 my-auto" style="font-family: 'Audiowide', cursive;">{{$siteName}}</div>
    </div>
    <div class="my-auto pr-4 text-white bg-yellow-200 items-right flex justify-end">
        <a href="/#" class="text-white">
          <img src="https://picsum.photos/30/30" class="text-white max-w-[30px] max-h-[30px]">
        </a>
    </div>
</div>

    Make the parent <div> a grid layout and then justify the grid children to the end of the axis:

    <script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div class="bg-black w-full py-4 px-4 grid grid-cols-2 gap-2 mb-0">
    <div class=" w-1/2 grid grid-cols-4 gap-2">
        <div class="my-auto col-span-1"><img src="https://picsum.photos/30/30?" style="{{addShadow()}}"></div>
        <div class="col-span-3 font-bold uppercase text-3xl text-stone-200 my-auto" style="font-family: 'Audiowide', cursive;">{{$siteName}}</div>
    </div>
    <div class="my-auto pr-4 text-white bg-yellow-200 grid justify-end">
        <a href="/#" class="text-white">
          <img src="https://picsum.photos/30/30" class="text-white max-w-[30px] max-h-[30px]">
        </a>
    </div>
</div>