中央上部ナビゲーション水平に左にロゴを置き、右側に言語を選択

Question

ロゴを左に、言語の選択を右にしながら、メニューを中央に水平に配置しようとしています。私が理解できないことは、サイズ変更時に同じ比率を保持する方法です。私は多くの提案を試みたが、私のナビゲーションバーに合ったものは見つけられなかった。 相続人は私がしようとしています：

CSS：

.nav-bar img { 
    float: left; 
} 
.nav-bar { 
    height: 70px; 
    width: 100%; 
} 
#container { 
    width: 1200px; 
    margin: 0 auto; 
    height: 70px; 
} 
.nav-bar ul { 
    padding: 0px; 
    margin: 0px; 
    text-align: center; 
    display:inline-block; 
    vertical-align:top; 
} 
#menu { 
    float: left; 
} 

#languages { 
    float: right; 
} 

HTML：

<div id="container"> 

    <img id="logo" src="image.svg"> 

    <ul id="menu"> 
     <li><a href="#">home</a></li> 
     <li><a href="#">about</a></li> 
     <li><a href="#">contact us</a></li> 
    </ul> 

    <ul id="lang-bar"> 
     <li><a href="#">En</a></li> 
     <li><a href="#">Fr</a></li> 
    </ul> 
    </div> 
</nav> 

Answer 1

あなたは ulインラインブロックと位置を作り、コンテナの text-align:centerを使用することができます

ロゴと言語メニューは絶対に左上と右上：

html, 
 
body { 
 
    margin: 0; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    text-align: center; 
 
    position: relative; 
 
    background: #ddd; 
 
} 
 

 
#container ul { 
 
    list-style: none; 
 
    display: inline-block; 
 
} 
 

 
#container ul li { 
 
    display: inline-block; 
 
    margin-right: 1em; 
 
} 
 

 
#logo { 
 
    position: absolute; 
 
    left: 0; 
 
} 
 

 
#lang-bar { 
 
    position: absolute; 
 
    right: 0; 
 
}

<div id="container"> 
 

 
    <img id="logo" src="image.svg"> 
 

 
    <ul id="menu"> 
 
    <li><a href="#">home</a></li> 
 
    <li><a href="#">about</a></li> 
 
    <li><a href="#">contact us</a></li> 
 
    </ul> 
 

 
    <ul id="lang-bar"> 
 
    <li><a href="#">En</a></li> 
 
    <li><a href="#">Fr</a></li> 
 
    </ul> 
 
</div>

Answer 2

あなたが親にflexを使用することができ、あなたが3人のフレックス子供を分離するためにjustify-content: space-betweenを使用することができますが、それは本当にロゴを中央にしません。代わりに、flex-grow: 1とflex-basis: 0をフレックスの子供（つまり、flex: 1 0 0;）で使用できるように、同じ量のスペースを占有してから、フレックスの子供のコンテンツを適切に整列させます。メインコンテナのalign-items: centerを使用すると、必要に応じて、すべてを垂直にセンタリングすることもできます。

#container { 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
#container > * { 
 
    flex: 1 0 0; 
 
} 
 

 
#lang-bar { 
 
    flex-direction: column; 
 
    align-items: flex-end; 
 
} 
 

 

 
#logo { 
 
    max-width: 100px; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
} 
 
    
 
#menu { 
 
    justify-content: center; 
 
    list-style: none; 
 
} 
 

 
#menu li { 
 
    margin: 0 .5em; 
 
}

<div id="container" class="flex"> 
 
    <div class="logoContainer"> 
 
    <img id="logo" src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
    </div> 
 
    <ul id="menu" class="flex"> 
 
    <li><a href="#">home</a></li> 
 
    <li><a href="#">about</a></li> 
 
    <li><a href="#">contact us</a></li> 
 
    </ul> 
 
    <ul id="lang-bar" class="flex"> 
 
    <li><a href="#">En</a></li> 
 
    <li><a href="#">Fr</a></li> 
 
    </ul> 
 
</div>