CSS Flex 不工作

Question

我想 justify 中的几张图片 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

如果我理解正确并且你试图将 .flex-item div 的内容居中（即图标），请将 justify-content: center; 替换为 text-align: center;。

你的问题不在于你如何应用 css，这是正确的，但取决于你试图实现的目标，你的问题在于实际使用的 css。

Answer 2

justify-content 属性仅对齐给定容器的 content/s 如果容器是 flex有能力的人。

将此添加到您的 CSS：

display: flex;

头部的完整 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/

Answer 3

如我所见，您拥有 "Hubert Siwkin" 提供给您的所有必要代码，但它位于页面左侧的位置。简单的修复。您需要编辑 "body" CSS 样式并添加 "margin" 值。

body {
   margin: 0px;
}

这将解决您面临的问题。

如果您想了解更多关于 "body" CSS 样式的信息，请使用以下 link.

http://www.w3schools.com/tags/tag_body.asp

更新：我已经更新了 "Hubert Siwkin" 提供的 jsFiddle。您拥有的大部分代码都不是必需的，所以我为您精简了它。

https://jsfiddle.net/hddbkcvv/

CSS Flex 不工作

CSS Flex Not Working

html

css

flexbox