ロゴとメニュー項目をヘッダーに垂直に配置するためのベストプラクティス

Question

ロゴとメインメニューの両方をフルサイズのヘッダーに垂直に配置しなければならないことが常にあります。これを処理する方法として広く受け入れられていますか？

Answer 1

#header { 
 
    box-sizing: border-box; 
 
    background: #ffc301; 
 
    padding: 10px 15px; 
 
    display: table; 
 
    width: 100%; 
 
    height: 70px; 
 
} 
 

 
.logo { 
 
    background: #000; 
 
    text-align: center; 
 
    width: 70px; 
 
    color: #fff; 
 
} 
 

 
.logo, 
 
.menu { 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
} 
 

 
.menu ul { 
 
    text-align: right; 
 
} 
 

 
.menu ul li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<header id="header"> 
 
    <div class="logo">Logo</div> 
 
    <nav class="menu"> 
 
    <ul> 
 
     <li><a href="#">Item 1</a></li> 
 
     <li><a href="#">Item 2</a></li> 
 
     <li><a href="#">Item 3</a></li> 
 
     <li><a href="#">Item 4</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 2

あなたはjustify-content: center;とalign-items: center;の特性とそれを得るためにflexboxを使用することができます。

#header { 
 
    box-sizing: border-box; 
 
    background: grey; 
 
    padding: 10px 15px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 100%; 
 
    height: 70px; 
 
} 
 

 
.logo { 
 
    background: black; 
 
    text-align: center; 
 
    width: 70px; 
 
    padding: 15px; 
 
    color: #fff; 
 
} 
 

 
.menu{ 
 
    flex: 1; 
 
    text-align: right; 
 
} 
 

 
.menu ul li{ 
 
    display: inline-block; 
 
    text-decoration: none; 
 
} 
 

 
a{ 
 
    text-decoration: none; 
 
}

<div id="header"> 
 
    <div class="logo">logo</div> 
 
    <nav class="menu"> 
 
    <ul> 
 
     <li><a href="#">item#1</a></li> 
 
     <li><a href="#">item#2</a></li> 
 
     <li><a href="#">item#3</a></li> 
 
    </ul> 
 
    </nav> 
 
</div>

Answer 3

あなたが使用することができます "表示：インラインブロック" プロパティを以下のように簡単にコードを短くする...

HTML：

<header> 
<div class="logo"><img src="logo.png" /></div><!-- 
--><nav class="menu"> 
<ul> 
    <li><a href="#">Item 1</a></li><!-- 
    --><li><a href="#">Item 2</a></li><!-- 
    --><li><a href="#">Item 3</a></li><!-- 
    --><li><a href="#">Item 4</a></li> 
</ul> 
</nav> 
</header> 

CSS：

header{ 
background-color: grey; 
box-sizing:border-box; 
display:inlnie-block; 
padding:10px 15px; 
width:100%; 
} 
.logo,.menu{ 
display:inline-block; 
font-size:0; 
vertical-align:middle; 
} 
.logo{ 
text-align:left; 
width:30%; 
} 
.logo img{ 
max-width:100%; 
} 
.menu{ 
text-align:right; 
width:70%; 
} 
.menu ul li{ 
display:inline-block; 
font-size:0; 
vertical-align:middle; 
} 
.menu ul li a{ 
font-size:14px; 
line-height:18px; 
text-decoration:none; 
}