全幅コンテナの中にセンタリングコンテナ？

Question

100％幅のコンテナに対して最大幅1100pxのコンテナを中央に配置しようとしていますが、問題が発生しています。

<div class="container-full"> 
    <div class="container"> 
     <nav> 
      <h1>Name</h1> 
      <ul> 
       <li>Home</li> 
       <li>About</li> 
       <li>Contact</li> 
      </ul> 
     </nav> 
    </div> 
</div> 

CSS：

.container-full { 
    width:100%; 
    background-color:blue; 
} 

.container { 
    width:1100px; 
    background-color:white; 
} 

nav { 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
} 

ul { 
    list-style-type:none; 
    padding:0; 
    display:flex; 
} 

私はそれはNAVは、フレックスボックスであることとは何かを持っていると思いますが、私はこの問題を解決することができますかどうかはわかりません。

Answer 1

あなたのコンテナに余白を追加します。

margin: auto; 

Answer 2

定義された幅で水平に中央何かに最も簡単な方法は、margin-left: auto; margin-right: auto;

.container-full { 
 
    width: 100%; 
 
    background-color: blue; 
 
} 
 

 
.container { 
 
    width: 1100px; 
 
    background-color: white; 
 
    margin: auto; 
 
} 
 

 
nav { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    display: flex; 
 
}

<div class="container-full"> 
 
    <div class="container"> 
 
    <nav> 
 
     <h1>Name</h1> 
 
     <ul> 
 
     <li>Home</li> 
 
     <li>About</li> 
 
     <li>Contact</li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</div>

Answer 3

ソリューションはmargin: 0 auto;を追加することで使用することです.containerに

を開始するには作業フィドルhere

.container-full { 
 
    width:100%; 
 
    background: blue; 
 
} 
 

 
.container { 
 
    width:1100px; 
 
    background: red; 
 
    margin: 0 auto; 
 
} 
 

 
nav { 
 
    display:flex; 
 
    justify-content:space-between; 
 
    align-items:center; 
 
} 
 

 
ul { 
 
    list-style-type:none; 
 
    padding:0; 
 
    display:flex; 
 
}

<div class="container-full"> 
 
    <div class="container"> 
 
     <nav> 
 
      <h1>Name</h1> 
 
      <ul> 
 
       <li>Home</li> 
 
       <li>About</li> 
 
       <li>Contact</li> 
 
      </ul> 
 
     </nav> 
 
    </div> 
 
</div>

Answer 4

を参照してください、私はあなたが何をしたいのかわかりません。コンテナの内容をコンテナフルに相対的にセンタリングしようとすると、以下のように動作する可能性があります。

何かをセンターしたい場合は、以下のミックスインを使用することができます。

exaple codepenリンク：http://codepen.io/hellouniverse/pen/PWyVbd

@mixin align-items() { 
    -webkit-box-align: center; 
    -ms-flex-align: center; 
    -webkit-flex-align: center; 
    -webkit-align-items: center; 
    -moz-align-items: center; 
    -ms-align-items: center; 
    align-items: center; 
} 

@mixin flexbox() { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -moz-flex; 
    display: -ms-flexbox; 
    display: flex; 
} 

@mixin justify-content ($val) { 
    -webkit-justify-content: $val; 
    -moz-justify-content: $val; 
    -ms-justify-content: $val; 
    justify-content: $val; 
} 


%aligner, 
.aligner { 
    @include align-items(); 
    @include flexbox(); 
    @include justify-content(center); 

    &-item { 
    max-width: 50%; 
    &--top { 
     -webkit-align-content: flex-start; 
     -moz-align-content: flex-start; 
     -ms-align-content: flex-start; 
     -ms-flex-line-pack: start; 
     align-content: flex-start; 
    } 

    &--bottom { 
     -webkit-align-content: flex-end; 
     -moz-align-content: flex-end; 
     -ms-align-content: flex-end; 
     -ms-flex-line-pack: end; 
     align-content: flex-end; 
    } 
    } 
} 

そして、上記SCSSのミックスイン

.container-full { 
    width: 100%; 
    background-color: blue; 
} 

.container { 
    width: 1100px; 
    background-color: white; 
} 

<div class="container-full aligner"> 
    <div class="container aligner"> 
     <nav> 
      <h1>Name</h1> 
      <ul> 
       <li>Home</li> 
       <li>About</li> 
       <li>Contact</li> 
      </ul> 
     </nav> 
    </div> 
</div> 

を追加した後になりますあなたのソリューション