如何并排对齐三个图像？ [关闭]

Posted 2023-03-05

【中文标题】如何并排对齐三个图像？ [关闭]

【英文标题】：How can I align three images side by side? [closed]

【发布时间】：2020-12-12 15:34:38

【问题描述】：

我想将三个图像并排对齐，每个图像下面都有一个段落like this。使用 html 和 CSS。谢谢你的帮助。

【问题讨论】：

您应该首先自己尝试一些方法，进行研究，编写一些代码，并且只有在失败时，才在此处展示您的尝试，以便有人可以帮助您...无论如何，看看 flexbox，您的答案就在于此其中。

欢迎来到 ***。请按照您创建此帐户时的建议阅读并遵循帮助文档中的发布指南。关于主题以及如何在此处申请。 *** 不是设计、编码、研究或教程服务。 ***.com/help/how-to-ask

【参考方案1】：

您可以使用 css display: flex 执行此操作，这是一个示例。如果您希望它们并排紧挨着彼此，您可能需要将内容容器的宽度设置为图片的宽度，否则该段落会将容器宽度推出，假设图像都是相同的宽度。否则，您可以使用flex-direction: space-between 或其他方式来决定您希望它们如何以一定间距组织。

.flex-container 
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;


.content-container 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 284px; 


p 
  text-align: center;

<div class=flex-container>
  <div class="content-container">
    <img src="https://www.fillmurray.com/284/196"></img>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac felis donec et odio pellentesque diam volutpat. </p>
  </div>
  <div class="content-container">
    <img src="https://www.fillmurray.com/284/196"></img>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac felis donec et odio pellentesque diam volutpat. </p>
  </div>
  <div class="content-container">
    <img src="https://www.fillmurray.com/284/196"></img>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac felis donec et odio pellentesque diam volutpat. </p>
  </div>
</div>

【参考方案2】：

这很容易。您必须创建三个 div 元素，并且每个元素都必须包含两个 div 元素。像这样

  <section class="example">
    <div class="image_n_parra_example">
       <div class="image1">
          <img src="your_folder"  >
       </div>
       <div class="parragraph1">your text here</div>
    </div>

那个方块 x 3

css 应该是这样的

.example

display: flex;
justify-content: center;
justify-content: space-between;


.parragraph1

text-align: center;

就是这样。

这就是它的样子 example