html - CSS Flex 不工作

Question

我想对齐 div 中的几张图片。

我添加了 justify-content: center;，但图像左对齐。为什么？

.item {
  justify-content: center;
}

<div class="item">
  <div>
      <img src="http://placehold.it/75x75" />
  </div>
  <div>
      <img src="http://placehold.it/75x75" />
  </div>
  <div>
      <img src="http://placehold.it/75x75" />
  </div>
</div>​

Answer 1

justify-content 属性仅对齐给定容器的内容(如果容器是灵活容器)。

将此添加到您的 CSS:

display: flex;

head 部分的完整 CSS 代码应该是:

<style type="text/css">
    .flex-item {
        display: flex;
        justify-content: center; 
    }
</style>

来源:http://www.w3schools.com/cssref/css3_pr_justify-content.asp

示例:http://www.w3schools.com/cssref/playit.asp?filename=playcss_justify-content&preval=center

Fidde 示例:https://jsfiddle.net/L4tmgs18/1/