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

Css – How to adjust the alignment of the avatar label text vertically center

I want to place the avatar label texts to be vertically centered of the avatar image

<div class="flex flex-wrap">
  <div class="flex mr-8">
    <div class="rounded-full overflow-hidden w-24 h-24">
      <img
        src="https://via.placeholder.com/150"
        alt="Avatar"
        class="w-full h-full object-cover"
      />
    </div>
    <div class="ml-4">
      <span class="text-lg font-bold block text-gold">Avatar 1</span>
      <span class="text-lg text-right text-black">Additional Text 1</span>
    </div>
  </div>
  <div class="flex">
    <div class="rounded-full overflow-hidden w-24 h-24">
      <img
        src="https://via.placeholder.com/150"
        alt="Avatar"
        class="w-full h-full object-cover"
      />
    </div>
    <div class="ml-4">
      <span class="text-lg font-bold block text-gold">Avatar 2</span>
      <span class="text-lg text-right text-black">Additional Text 2</span>
    </div>
  </div>
</div>

it doesn’t work if I place justify center to the div of the label text.
I’ve tried to used chatGPT but it insists on placing items-center to the main div.

Tags:

2

Answers


  1. 0

    Use items-center.

    <div class="flex flex-wrap">
  <div class="mr-8 flex items-center">
    <div class="h-24 w-24 overflow-hidden rounded-full">
      <img src="https://via.placeholder.com/150" alt="Avatar" class="h-full w-full object-cover" />
    </div>
    <div class="ml-4">
      <span class="text-gold block text-lg font-bold">Avatar 1</span>
      <span class="text-right text-lg text-black">Additional Text 1</span>
    </div>
  </div>
  <div class="flex items-center">
    <div class="h-24 w-24 overflow-hidden rounded-full">
      <img src="https://via.placeholder.com/150" alt="Avatar" class="h-full w-full object-cover" />
    </div>
    <div class="ml-4">
      <span class="text-gold block text-lg font-bold">Avatar 2</span>
      <span class="text-right text-lg text-black">Additional Text 2</span>
    </div>
  </div>
</div>

    https://play.tailwindcss.com/6nnQETxb7v

    Login or Signup to reply.
  2. 0

    You can use items-center class where you have your flex div.
    https://play.tailwindcss.com/AWSjDJrZVz

    <div class="flex flex-wrap">
  <div class="flex items-center mr-8">
    <div class="rounded-full overflow-hidden w-24 h-24">
      <img
        src="https://via.placeholder.com/150"
        alt="Avatar"
        class="w-full h-full object-cover"
      />
    </div>
    <div class="ml-4">
      <span class="text-lg font-bold block text-gold">Avatar 1</span>
      <span class="text-lg text-right text-black">Additional Text 1</span>
    </div>
  </div>
  <div class="flex items-center">
    <div class="rounded-full overflow-hidden w-24 h-24">
      <img
        src="https://via.placeholder.com/150"
        alt="Avatar"
        class="w-full h-full object-cover"
      />
    </div>
    <div class="ml-4">
      <span class="text-lg font-bold block text-gold">Avatar 2</span>
      <span class="text-lg text-right text-black">Additional Text 2</span>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search