Navをロゴに垂直方向にセンタリングするにはどうすればよいですか？

Question

私は右にロゴ付きのヘッダーバーを作成しようとしていますが、水平ナビゲーションは通常どおり左にあります。私は、ナビゲーションアイテムをロゴの中心に垂直に配置する必要があります。

私はいくつかの方法を試しました。誰かが私の周りの道を示すことができ、なぜそれが働いたのか、私はおそらく欠けていたものを説明することができれば感謝します。

body { 
 
    max-width: 995px; 
 
    margin: 0 auto; 
 
    padding: 20px 0; 
 
    box-sizing: border-box; 
 
    font-family: 'Arial'; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: #222; 
 
} 
 

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

 
.logo img { 
 
    max-width: 235px; 
 
    height: auto; 
 
    float: left; 
 
} 
 

 
.menu li { 
 
    display: inline-flex; 
 
    padding-left: 30px; 
 
} 
 

 
.menu { 
 
    float: right; 
 
} 
 

 
.nav { 
 
    padding-bottom: 25px; 
 
} 
 

 
.group:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<div class="nav group"> 
 
    <div class="logo"><img src="img/ahlogo.png" alt="Abdulla Hussain's Logo"></div> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li><a href="#about">About</a></li> 
 
     <li><a href="#portfolio">Portfolio</a></li> 
 
     <li><a href="#thoughts">Thoughts</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
     <li><i class="fa fa-facebook social" aria-hidden="true"></i></li> 
 
    </ul> 
 
    </div> 
 
</div>

ありがとうございました！

Answer 1

ナビゲーションをロゴの下端に揃えたいとしますか？

.nav.group { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
} 

body { 
 
    max-width: 995px; 
 
    margin: 0 auto; 
 
    padding: 20px 0; 
 
    box-sizing: border-box; 
 
    font-family: 'Arial'; 
 
} 
 

 
.nav.group { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: flex-end; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: #222; 
 
} 
 

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

 
.logo img { 
 
    max-width: 235px; 
 
    height: auto; 
 
    float: left; 
 
} 
 

 
.menu li { 
 
    display: inline-flex; 
 
    padding-left: 30px; 
 
} 
 

 
.menu { 
 
    float: right; 
 
} 
 

 
.nav { 
 
    padding-bottom: 25px; 
 
} 
 

 
.group:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<div class="nav group"> 
 
    <div class="logo"><img src="http://placehold.it/120x120/0af" alt="Abdulla Hussain's Logo"></div> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li><a href="#about">About</a></li> 
 
     <li><a href="#portfolio">Portfolio</a></li> 
 
     <li><a href="#thoughts">Thoughts</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
     <li><i class="fa fa-facebook social" aria-hidden="true"></i></li> 
 
    </ul> 
 
    </div> 
 
</div>

代替：はい、あなたは両方の親要素に以下の設定でdisplay:flexを使用できる場合は、にしたい場合は、にそれらを垂直方向に中央揃えalign-items:を変更center;（または上部の位置合わせの場合はtop）

body { 
 
    max-width: 995px; 
 
    margin: 0 auto; 
 
    padding: 20px 0; 
 
    box-sizing: border-box; 
 
    font-family: 'Arial'; 
 
} 
 

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

 
a { 
 
    text-decoration: none; 
 
    color: #222; 
 
} 
 

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

 
.logo img { 
 
    max-width: 235px; 
 
    height: auto; 
 
    float: left; 
 
} 
 

 
.menu li { 
 
    display: inline-flex; 
 
    padding-left: 30px; 
 
} 
 

 
.menu { 
 
    float: right; 
 
} 
 

 
.nav { 
 
    padding-bottom: 25px; 
 
} 
 

 
.group:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<div class="nav group"> 
 
    <div class="logo"><img src="http://placehold.it/120x120/0af" alt="Abdulla Hussain's Logo"></div> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li><a href="#about">About</a></li> 
 
     <li><a href="#portfolio">Portfolio</a></li> 
 
     <li><a href="#thoughts">Thoughts</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
     <li><i class="fa fa-facebook social" aria-hidden="true"></i></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

これは、ライン内の項目を設定するdisplay:flexを使用しています。

display:flex（私はIE <と思います）をサポートしていないブラウザを使用する必要があり、別の方法が必要な場合はお知らせください。

私はそれがどのように見えるので、オープンサンが含まれています。

要素の中立性を示すために使用されるオレンジ。

ロゴの高さがわかっている場合は、これが機能します。それが不明な場合や、高さが変わった場合（ページがスクロールした後に多くの場所にナビバーが少し縮小する）、別の解決策が必要になることがあります。

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700'); 
 
.nav { 
 
    display: flex; 
 
    background-color: orange; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 50px; 
 
    font-family: "Open Sans"; 
 
    font-weight: bold; 
 
    justify-content: space-between; 
 
} 
 

 
.menu ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.menu ul li { 
 
    display: inline-block; 
 
    padding: 5px 10px; 
 
    box-sizing: border-box; 
 
    line-height: 40px; 
 
    font-size: 20px; 
 
} 
 

 
.menu ul li:first-child { 
 
    margin-left: 10px; 
 
} 
 

 
.menu ul li a { 
 
    text-decoration: none; 
 
}

<div class="nav group"> 
 
    <div class="logo"><img src="//placehold.it/200x50" alt="Abdulla Hussain's Logo"></div> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li><a href="#about">About</a></li> 
 
     <li><a href="#portfolio">Portfolio</a></li> 
 
     <li><a href="#thoughts">Thoughts</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
     <li><i class="fa fa-facebook social" aria-hidden="true"></i></li> 
 
    </ul> 
 
    </div> 
 
</div>