Question

我开始学习html5＆amp; css3由我自己，但有麻烦的中心元素与正当的内容。我的目标是制作一个基本的响应式布局。

在我的代码中，我将整个网络集中在一起，但也无法将标题内的div放在中心位置。我试图使用＆＃34;证明内容＆＃34;将它设置为居中并将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;

Answer 1

你只需要添加：

header {
   margin: 0 auto;
}

Answer 2

您可以尝试在标题部分为div添加其他容器。然后将其设置为显示为内联块。最后一步是将标题的“text-align”属性设置为center。代码：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 个答案: