CODEWITHSUNDEEP
htmlcsstailwind-css
William Collishaw
William Collishaw

Reputation: 95

Center-align one element and right align second element- Tailwind CSS

I have attached a rough idea of what I am trying to achieve, the dotted line represents the center of the container. I am trying to center align one div element, then right align a second div within the same row, while both elements are centered horizontally. enter image description here

Upvotes: 2

Views: 5259

Answers (2)

Duke
Duke

Reputation: 7444

For me the trick was justify-between. Makes it so the way the flexbox grows, the free space is distributed in between the elements.

Here's a snippet:


<div class="flex flex-col content-center justify-center mt-16 mx-auto max-w-xl">
    <!-- Top level info -->
    <div class="flex justify-between w-full">
        <h3 class="h3">Sign In</h3>
        <p class="p">Dashboard / Sign In</p>
    </div>
</div>

Upvotes: 1

doğukan
doğukan

Reputation: 27389

Try like this:

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

<div class="flex items-center justify-center border border-dashed">
  <div class="flex-1"></div>
  <div class="w-32 h-32 bg-red-500"></div>
  <div class="flex-1">
    <div class="w-20 h-20 bg-green-500 ml-auto"></div>
  </div>
</div>

With grid:

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

<div class="grid grid-cols-[minmax(0,1fr),auto,minmax(0,1fr)] items-center border border-dashed">
  <div></div>
  <div class="w-32 h-32 bg-red-500"></div>
  <div class="w-20 h-20 bg-green-500 ml-auto"></div>
</div>

Upvotes: 9

Related Questions