使用flexbox将两个元素并排放置

Question

如何使用CSS flex将页面上的锚点和段落水平居中？

我试图避免在锚点和段落上使用float，尽管我还没有完全掌握flex。

锚点/图像应该出现在段落的左侧，尽管它们作为一个整体应该保持居中。

到目前为止我所做的事情：

＆＃13;

＆＃13;

section
{
 align-items: center;
 display: flex;
 flex-direction: column;
}

＆＃13;

<section>
 <a href="#">
  <img alt="Example" src="https://jsfiddle.net/img/logo.png" />
 </a>
 <p>Description goes here...</p>
</section>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/eondkrpd/

Answer 1

section {
  display: flex;
  justify-content: center;
}

<section>
  <a href="#">
    <img alt="Example" src="https://jsfiddle.net/img/logo.png" />
  </a>
  <p>Description goes here...</p>
</section>

• display: flex创建了灵活容器
• flex-direction: row，默认设置（即可以省略），使主轴水平，将儿童（柔性项目）朝这个方向对齐
• justify-content: center将灵活项目沿主轴居中

此处有更多详情：Methods for Aligning Flex Items