英文:
How to adjust the alignment of the avatar label text vertically center
问题
我想将头像标签文本垂直居中在头像图像内部。
<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="头像"
class="w-full h-full object-cover"
/>
</div>
<div class="ml-4">
<span class="text-lg font-bold block text-gold">头像 1</span>
<span class="text-lg text-right text-black">附加文本 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="头像"
class="w-full h-full object-cover"
/>
</div>
<div class="ml-4">
<span class="text-lg font-bold block text-gold">头像 2</span>
<span class="text-lg text-right text-black">附加文本 2</span>
</div>
</div>
</div>
如果我将div标签的justify-center属性放到标签文本的div上，它不起作用。
我尝试使用chatGPT，但它坚持将items-center放到主div上。
英文:
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.
答案1
得分: 1
使用 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
英文:
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>
答案2
得分: 0
您可以在具有 flex div 的地方使用 items-center 类。
<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="头像"
class="w-full h-full object-cover"
/>
</div>
<div class="ml-4">
<span class="text-lg font-bold block text-gold">头像 1</span>
<span class="text-lg text-right text-black">附加文本 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="头像"
class="w-full h-full object-cover"
/>
</div>
<div class="ml-4">
<span class="text-lg font-bold block text-gold">头像 2</span>
<span class="text-lg text-right text-black">附加文本 2</span>
</div>
</div>
</div>
英文:
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论