1

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

在我的代码中，我将整个网络居中，但也无法将标题内的 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;
4

2 回答 2

0

您可以尝试在标题部分为 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;
    }
于 2016-03-26T19:36:10.817 回答
0

你只需要添加这个：

header {
   margin: 0 auto;
}
于 2016-03-26T19:25:13.360 回答