Question 160327 in CSS Question posted in
Some basic documentation can be found here.

Is text not aligning with image using CSS & Tailwind?

The text is not aligned with the photo:

<div class="inline-block">
    <img class="relative h-6 w-6 rounded-full bg-gray-50 ring-2 ring-white" src="https://static.generated.photos/vue-static/home/hero/6.png" alt="">
    <img class="relative bottom-2 left-4 h-3 w-3 rounded-full bg-gray-50 ring-2 ring-white" src="https://static.generated.photos/vue-static/home/hero/8.png" alt="">
</div>
Some name

https://play.tailwindcss.com/21iaVRA65b

What is wrong?

Tags:

3

Answers


  1. 0

    The second <img> tag has moved vertically upwards but its layout box is still at its original place:

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

<div class="inline-block">
    <img class="relative h-6 w-6 rounded-full bg-gray-50 ring-2 ring-white" src="https://static.generated.photos/vue-static/home/hero/6.png" alt="">
    <img class="relative left-4 h-3 w-3 rounded-full bg-gray-50 ring-2 ring-white" src="https://static.generated.photos/vue-static/home/hero/8.png" alt="">
</div>
Some name

    You could consider using a slightly different layout method with the same visual effect but which moves the layout box:

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

<div class="inline-block">
    <img class="relative h-6 w-6 rounded-full bg-gray-50 ring-2 ring-white" src="https://static.generated.photos/vue-static/home/hero/6.png" alt="">
    <img class="relative -mt-2 left-4 h-3 w-3 rounded-full bg-gray-50 ring-2 ring-white" src="https://static.generated.photos/vue-static/home/hero/8.png" alt="">
</div>
Some name

    Edit: to have the image and the text vertically-center-aligned:

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

<div class="flex items-center gap-1">
  <div>
      <img class="relative h-6 w-6 rounded-full bg-gray-50 ring-2 ring-white" src="https://static.generated.photos/vue-static/home/hero/6.png" alt="">
      <img class="relative -mt-2 left-4 h-3 w-3 rounded-full bg-gray-50 ring-2 ring-white" src="https://static.generated.photos/vue-static/home/hero/8.png" alt="">
  </div>
  Some name
    Login or Signup to reply.
  2. 0

    You can use display: flex on the parent of inline-block div and text. Here is the example:-

    <div class="flex">
  <div class="inline-block">
      <img class="relative h-6 w-6 rounded-full bg-gray-50 ring-2 ring-white" src="https://static.generated.photos/vue-static/home/hero/6.png" alt="">
      <img class="relative bottom-2 left-4 h-3 w-3 rounded-full bg-gray-50 ring-2 ring-white" src="https://static.generated.photos/vue-static/home/hero/8.png" alt="">
  </div>
  Some name
</div>
    Login or Signup to reply.
  3. 0

    You can add parent with class flex items-center to make vertically center items.

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

<div class="flex items-center gap-2">
  <div class="relative block">
      <img class="relative h-6 w-6 rounded-full bg-gray-50 ring-2 ring-white" src="https://static.generated.photos/vue-static/home/hero/6.png" alt="">
      <img class="relative bottom-2 left-4 h-3 w-3 rounded-full bg-gray-50 ring-2 ring-white" src="https://static.generated.photos/vue-static/home/hero/8.png" alt="">
  </div>
  Some name
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search