证明内容不起作用答案

【问题标题】：Justify content doesn't work证明内容不起作用
【发布时间】：2016-07-14 09:11:15
【问题描述】：

我开始自己学习 html5 和 css3，但是在将元素与 justify-content 对齐时遇到了麻烦。我的目标是制作一个基本的响应式布局。

在我的代码中，我将整个 web 居中，但也无法让标题内的 div 居中。我尝试使用“justify-content”将其设置为居中并将 Flex 设置为 1，因为我希望我的 3 个 div 使用导航器中的总空间，但它不起作用。因此，如果有人可以帮助我，那就太好了。谢谢！

PD：对不起，如果我的英语不是很好。

HTML

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <title>HTML5</title>
    <link href="style.css" rel="stylesheet"> 
</head>
<body>
    <header>
        <div id="element1">ELEMENT 1</div>
        <div id="element2">ELEMENT 2</div>
        <div id="element3">ELEMENT 3</div>          
    </header>
    <section>
    </section>
    <footer>
    </footer>
</body>

CSS

* {
    margin:0px;
    padding:0px;
}
header, section, footer, aside, nav, article, hgroup{
    display:block;
}
html{
    width:100%;
    background:white;
    height:100%;    
}
body {
    max-width:2000px;
    display:flex;
    margin:auto;
    background:gray;
}
header{
    display:flex;
    justify-content:center;
}
header div{
    padding:10px;
    flex:1;
}
#element1{
    background:yellow;
}
#element2{
    background:red;
}
#element3{
    background:orange;

【问题讨论】：

标签： html css flexbox responsive

【解决方案1】：

您可以尝试在标题部分为 div 添加额外的容器。然后将其设置为显示为 inline-block。最后一步是将标题的“文本对齐”属性设置为居中。代码：https://jsfiddle.net/8w3rz77o/

CSS：

* {
    margin:0px;
    padding:0px;
}
header, section, footer, aside, nav, article, hgroup{
    display:block;
}
html{
    width:100%;
    background:white;
    height:100%;    
}
body {
    max-width:2000px;
    background:gray;
    width: 100%;
}
header{
   width: 100%;
   text-align: center;
}
header > div{
      display: inline-block;
}
header > div > div{
    padding:10px;
    display: inline-block;
}

#element1{
    background:yellow;
}
#element2{
    background:red;
}
#element3{
    background:orange;
    }

【讨论】：

【解决方案2】：

你只需要添加这个：

header {
   margin: 0 auto;
}

【讨论】：

谢谢它的工作！只是一个小问题，我很好奇，因为我在没有 justify-content 和作品的情况下尝试它，这意味着在这种情况下不需要 justify-content？什么情况下需要？
这是因为在您的情况下，标题的宽度仅与其内容一样宽。你可以给 header 一个 100% 的宽度，给 div 一个 flex: 0 0 auto; value 和 justify-content: center 将按预期工作....