无法在Tailwind CSS中对齐图像。

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

Cannot align images in tailwind css

问题

我尝试将图像设置到右侧，但我无法做到。

这是代码：

<div class="hidden lg:block lg:bg-red-400 flex">
  <img class="h-10 justify-center" src="..." alt="">
</div>
英文:

I am trying to set image to the right side. But I am unable to do so.

Here's the code:

&lt;div class=&quot;hidden lg:block lg:bg-red-400 flex&quot;&gt;
  &lt;img class=&quot;h-10 justify-center&quot; src=&quot;...&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;

答案1

得分: 2

以下是翻译好的部分：

  • 通过在 flex 父元素上使用 justify-end 类来应用 justify-content: flex-end。
  • 通过在 <img> 元素上使用 ml-auto 类来应用 margin-left: auto。
英文:

You could:

  • Apply justify-content: flex-end via the justify-end class on the flex parent.
  • Apply margin-left: auto via the ml-auto class on the &lt;img&gt; element.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;

&lt;div class=&quot;bg-red-400 flex justify-end&quot;&gt;
  &lt;img class=&quot;h-10 justify-center&quot; src=&quot;https://picsum.photos/40/40&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;

&lt;div class=&quot;bg-red-400 flex&quot;&gt;
  &lt;img class=&quot;h-10 justify-center ml-auto&quot; src=&quot;https://picsum.photos/40/40&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月20日 00:59:53
  • 转载请务必保留本文链接：https://go.coder-hub.com/76057087.html
  • css
  • html
  • tailwind-css
匿名

发表评论

匿名网友

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

确定