How can I align image horizontally in tailwind-css

user_6562458 0
Viewed 4991

I'm having difficulty in aligning an image to right-side inside a child div of a grid with tailwind-css. I have tried float-right, right-0, etc but none of them worked.

.next-visit {
  background-color: #7645c1;
  margin: 5px 1px;
  border-radius: 15px;
  padding: 10px;
  color: #fff;
}
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

 <div class="next-visit">

      <div class="grid grid-cols-2 gap-4">
        <div>
          <span class="text-sm">Next visit</span>
          <p class="text-lg font-semibold">19 Oct 2021</p>
        </div>
        <div class="w-12">
          <img src="https://placeimg.com/640/480/any" class="float-right">
          </div>
      </div>
    </div>

Expected result
expected result tailwind css image align right

tailwind-css alignment html
3 Answers

Here is how you can do it using flexbox:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="flex items-center justify-center min-h-screen">
    <div class="flex items-center justify-between h-24 text-white bg-purple-600 rounded-lg shadow-md">
        <div class="flex flex-col px-4">
            <span class="text-xs text-purple-300">Next visit</span>
            <p class="text-2xl font-semibold uppercase">19 Oct 2021</p>
        </div>
        <img class="h-full py-2 pr-4 ml-8" src="https://placeimg.com/640/480/any"></img>
    </div>
</div>

Result: enter image description here

user_137749920

Usually you want to pick between either float, grid or flex and stick with it. In your case I would probably just use flex like this:

Note the ml-auto which is margin-left: auto which makes the image move over to the right.

.next-visit {
  background-color: #7645c1;
  margin: 5px 1px;
  border-radius: 15px;
  padding: 10px;
  color: #fff;
}
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

 <div class="next-visit">

      <div class="flex">
        <div>
          <span class="text-sm">Next visit</span>
          <p class="text-lg font-semibold">19 Oct 2021</p>
        </div>

        <div class="ml-auto w-12">
          <img src="https://placeimg.com/640/480/any" class="float-right">
          </div>
      </div>
    </div>

user_14025850

When you add the class w-12 to the parent div, you make that right half of your grid a very small width. Your image is confined within that space. You may have intended something more like w-full, although because of your grid layout this container div is entirely superfluous, as well as the float-right. You could remove the div, and remove the float-right on the image, and the image will fill the right portion of this container. However its height will now be large, so you will need to clamp the container height. Once you clamp the container height and then the image within it, you'll see that the position seems strange, so I suggest removing the grid layout and utilizing float-left and float-right if this scales with your design needs for this component. i.e.

.next-visit {
  background-color: #7645c1;
  margin: 5px 1px;
  border-radius: 15px;
  padding: 10px;
  color: #fff;
}
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="next-visit">
  <div class="h-20">
    <div class="float-left">
      <span class="text-sm">Next visit</span>
      <p class="text-lg font-semibold">19 Oct 2021</p>
    </div>
    <img src="https://placeimg.com/640/480/any" class="float-right h-full">
  </div>
</div>

user_82862370
Related