div内のnavの垂直方向の整列

Question

親div内で垂直方向に整列されたナビゲーションバーを作成したいとします。ここに私のコードです：インラインブロック「および "：

div#banner { 
 
    background-color: green; 
 
    height: 100px; 
 
} 
 

 
div#title { 
 
    float: left; 
 
    width: 300px; 
 
    color: white; 
 
    font-size: 20px; 
 
} 
 

 
nav#menu { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    padding: 0px; 
 
    margin: 0px font-size: 20px; 
 
    text-align: center; 
 
} 
 

 
nav#menu ul { 
 
    background-color: red; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    list-style: none; 
 
    display: inline; 
 
} 
 

 
nav#menu ul li { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    display: inline; 
 
    vertical-align: middle; 
 
} 
 

 
nav#menu ul li a { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    width: 60px; 
 
    display: inline-block; 
 
    color: white; 
 
}

<div id="banner"> 
 

 
    <div id="title"> 
 
    <h1>The Title</h1> 
 
    </div> 
 

 
    <nav id="menu"> 
 
    <ul> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="about.html">About</a></li> 
 
     <li><a href="contact.html">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 

 
</div>

が垂直方向に「タイトル」内に整列「メニュー」を作るしようとするが、私は、「メニュー」、」ディスプレイを与えましたvertial-align：middle "である。

ただし、メニューは中央ではなく周囲のdivの上部に表示されます。

変更する必要はありますか？

Answer 1

最善の方法と現代の一つはのdiv＃バナーアドオンのため 、フレックスを使用している： 表示：フレックス; align-items：center;

div#banner { 
 
    background-color: green; 
 
    height: 100px; 
 
    display:flex; 
 
    align-items:center; 
 
} 
 

 
div#title { 
 
    float: left; 
 
    width: 300px; 
 
    color: white; 
 
    font-size: 20px; 
 
} 
 

 
nav#menu { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    padding: 0px; 
 
    margin: 0px font-size: 20px; 
 
    text-align: center; 
 
} 
 

 
nav#menu ul { 
 
    background-color: red; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    list-style: none; 
 
    display: inline; 
 
} 
 

 
nav#menu ul li { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    display: inline; 
 
    vertical-align: middle; 
 
} 
 

 
nav#menu ul li a { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    width: 60px; 
 
    display: inline-block; 
 
    color: white; 
 
}

<div id="banner"> 
 

 
    <div id="title"> 
 
    <h1>The Title</h1> 
 
    </div> 
 

 
    <nav id="menu"> 
 
    <ul> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="about.html">About</a></li> 
 
     <li><a href="contact.html">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 

 
</div>

Answer 2

これをフレックスボックスレイアウトに変更するだけで、いくつかの行を追加できます。この方法では、ナビゲーションのサイジングと配置をはるかに制御できます。

div#banner { 
 
    background-color: green; 
 
    height: 100px; 
 
    display: flex; <- this 
 
    align-items: center; <- and this 
 
} 
 

 
div#title { 
 
    float: left; 
 
    width: 300px; 
 
    color: white; 
 
    font-size: 20px; 
 
} 
 

 
nav#menu { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    padding: 0px; 
 
    margin: 0px font-size: 20px; 
 
    text-align: center; 
 
} 
 

 
nav#menu ul { 
 
    background-color: red; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    list-style: none; 
 
    display: inline; 
 
} 
 

 
nav#menu ul li { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    display: inline; 
 
    vertical-align: middle; 
 
} 
 

 
nav#menu ul li a { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    width: 60px; 
 
    display: inline-block; 
 
    color: white; 
 
}

<div id="banner"> 
 

 
    <div id="title"> 
 
    <h1>The Title</h1> 
 
    </div> 
 

 
    <nav id="menu"> 
 
    <ul> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="about.html">About</a></li> 
 
     <li><a href="contact.html">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 

 
</div>

Answer 3

編集これであなたCSS：

div#banner { 
    background-color: green; 
    height: 100px; 
    display: flex; 
    align-items: center; 
} 

div#title { 
    float: left; 
    width: 300px; 
    color: white; 
    font-size: 20px; 
} 

nav#menu { 
    display: inline-block; 
    vertical-align: middle; 
    padding: 0px; 
    margin: 0px font-size: 20px; 
    text-align: center; 
} 

nav#menu ul { 
    background-color: red; 
    padding: 0px; 
    margin: 0px; 
    list-style: none; 
    display: inline; 
} 

nav#menu ul li { 
    padding: 0px; 
    margin: 0px; 
    display: inline; 
    vertical-align: middle; 
} 

nav#menu ul li a { 
    padding: 0px; 
    margin: 0px; 
    width: 60px; 
    display: inline-block; 
    color: white; 
} 

Answer 4

＃メニューをNAVに次の行を追加します

nav#menu { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}