如何调整头像标签文本的垂直居中对齐。

huangapple
go评论55阅读模式
英文:

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

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

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.

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

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

答案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

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

huangapple
  • 本文由 发表于 2023年7月3日 23:02:41
  • 转载请务必保留本文链接：https://go.coder-hub.com/76605950.html
  • css
  • tailwind-css
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定