1

私は自分でhtml5とcss3を学び始めていますが、正当化コンテンツで要素を中央に配置するのに問題があります。私の目標は、基本的なレスポンシブ レイアウトを作成することです。

私のコードでは、Web 全体を中央に配置していますが、ヘッダー内の div も中央に配置できません。3 つの div でナビゲーターの合計スペースを使用したいので、「justify-content」を中央に、Flex を 1 に設定して使用しようとしていますが、機能しません。誰かが私を助けることができれば、それは素晴らしいことです。ありがとう！

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 用のコンテナを追加してみることができます。次に、インラインブロックとして表示されるように設定します。最後のステップは、ヘッダーの「text-align」プロパティを中央に設定することです。コード: 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 に答える