2017-04-22 16 views
0

フレックスボックスを使用して作成されたナビゲーションバーがあり、3つのセクションが必要です。左のリンク、右のリンク、中央のロゴ。しかし、フレックスボックスを使用しようとすると、左側のリンクの内容と右側のリンクの内容が異なる場合、私のロゴはオフセットされてしまいます。どうすれば私のロゴを中央に置くことができますか?両方のメニュー項目を持つFlexboxナビゲーションバー

enter image description here

これはHTMLです:

<nav> 
<div class="logo"> 
    <img src="img/logo.svg"/> 
</div> 
<ul> 
    <li><a href="/about.html" class="selected">Home</a></li> 
    <li><a href="/about.html">About</a></li> 
    <li><a href="/about.html">Work</a></li> 
    <li><a href="/about.html">Contact</a></li> 
</ul> 
</nav> 

これはCSSです:

nav { 
    display: flex; 
    text-align: center; 
} 

nav > .logo { 
    flex-grow: 1; 
} 

nav > .logo > img { 
    height: 1rem; 
} 

nav > ul { 
    display: flex; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

nav > ul > li { 
    margin: 0 1rem; 
} 
+0

二重の郵便で#71-78のボックスを参照。 –

+1

偉大な、私は正しいものを探していなかったと思います。ありがとう。 – Rjdlee

答えて

1

* { 
 
    margin: 0; padding: 0; } 
 

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

 
.logo img { 
 
    width: 200px; } 
 

 
nav > ul { 
 
    display: flex; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
nav > ul > li { 
 
    margin: 0 1rem; 
 
}
<nav> 
 
    <ul> 
 
     <li><a href="/about.html" class="selected">Home</a></li> 
 
    </ul> 
 
    <div class="logo"> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png"/> 
 
    </div> 
 
    <ul> 
 
     <li><a href="/about.html" class="selected">Home</a></li> 
 
    </ul> 
 
</nav>

ロゴにflex-grow:1を使用する必要はありません。ロゴの幅を指定し、justify-content:space-betweenを使用することができます。アラインメントアイテム:center;

align-items: center要素を垂直に整列させます。一方、justify-content: space-betweenは空き領域で均等に要素を区切ります。

関連する問題