在弹性框中以不同的方式对齐 2 个不同的元素答案

【问题标题】：Align 2 different elements differently in a flex box在弹性框中以不同的方式对齐 2 个不同的元素
【发布时间】：2019-12-26 21:12:31
【问题描述】：

<figure class="flex justify-center items-center">
   <img src="something.png">
   <a href="#"><img src="somethingelse.png"></a>
</figure>

<figure> 我使用 Tailwindcss，css 规则就是它们听起来的样子。

现在上面的中心 <img> 和 <a> 但我想要的是中心 <img> 但右下角 <a> 连同包含 <img>

我如何做到这一点？

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

您可以在<a> 标签上使用CSS justify-self 和CSS align-self 来实现您想要的。尝试使用我提供的链接中的示例。

【讨论】：

【解决方案2】：

将它们包装在一个 div 中！我用 bootstrap 4 类替换了你的类，但你应该能够解决它！

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<figure class="d-flex flex-column justify-content-center align-items-center">
  <div class="d-flex flex-column align-items-end">
   <img src="http://via.placeholder.com/300">
   <a href="#"><img src="http://via.placeholder.com/80"></a>
  </div>
</figure>

【讨论】：