垂直整列：中間が機能していませんか？

Question

なぜvertical-align: middle;は私のh1で動作していませんか？ ulはh1と一致していません。

#logo { 
 
\t color: white; 
 
\t display: inline; 
 
\t vertical-align: middle; 
 
} 
 

 
ul { 
 
\t padding: 20px; 
 
\t background: rgba(0,0,0,.5); 
 
} 
 

 
#title { 
 
\t position: absolute; 
 
\t text-align: center; 
 
\t color: white; 
 
\t font-size: 50px; 
 
\t top: 100px; 
 

 
} 
 

 
#navbar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-image: url('../img/bg.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    height: 600px; 
 
} 
 

 
li { 
 
\t float: right; 
 
\t display: inline; 
 
} 
 

 
li a { 
 
\t display: inline; 
 
\t padding: 10px 10px 10px 20px; 
 
\t text-decoration: none; 
 
\t color: white; 
 
}

<div id="navbar"> 
 
\t \t <ul> 
 
\t \t \t <h1 id="logo">Jordan Baron</h1> 
 
\t \t \t <li><a href="#">About Me</a></li> 
 
\t \t \t <li><a href="#">Contact</a></li> 
 
\t \t \t <li><a href="#">Projects</a></li> 
 
\t \t </ul> 
 

 
\t \t <h1 id="title">Freelance Web Developer</h1> 
 
\t </div>

Answer 1

vertical-alignのみinlineとtable-cell要素ではなく、ブロックレベル要素に適用されるので。

あなたのリンクがあなたのヘッダと整列させるためには、あなたはヘッダ要素（35.33px）の高さに等しいline-heightを割り当てる必要があります：

li { 
    line-height: 35.33px; 
} 

#logo { 
 
    color: white; 
 
    display: inline; 
 
    vertical-align: middle; 
 
} 
 

 
ul { 
 
    padding: 20px; 
 
    background: rgba(0, 0, 0, .5); 
 
} 
 

 
#title { 
 
    position: absolute; 
 
    text-align: center; 
 
    color: white; 
 
    font-size: 50px; 
 
    top: 100px; 
 
} 
 

 
#navbar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-image: url('../img/bg.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    height: 600px; 
 
} 
 

 
li { 
 
    float: right; 
 
    display: inline; 
 
    line-height: 35.33px; 
 
} 
 

 
li a { 
 
    display: inline; 
 
    padding: 10px 10px 10px 20px; 
 
    text-decoration: none; 
 
    color: white; 
 
}

<div id="navbar"> 
 
    <ul> 
 
    <h1 id="logo">Jordan Baron</h1> 
 
    <li><a href="#">About Me</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    <li><a href="#">Projects</a></li> 
 
    </ul> 
 

 
    <h1 id="title">Freelance Web Developer</h1> 
 
</div>

<ul>の子として<h1>要素を持つことは無効な構文であることにも注意してください。 <li>要素のみが<ul>の子になります。あなたがするべきことは、<ul>のタイトルを持ち出し、<ul>要素全体を右側に浮かべてください。

希望すると便利です。 :)

Answer 2

少しフリップフロップの準備ができていますか？

ここではFLEXBOXが来ます！これは、「より良い」行うことができるが、私はあなたのHTML構造を変更したくなかった：https://jsfiddle.net/ohbffjjm/

#navbar { 
 
    background-color: pink; 
 
} 
 

 
#logo { 
 
    margin-right: 150px; 
 
    align-self: flex-start; 
 
} 
 

 
ul { 
 
    display: flex; 
 
    align-items: center; 
 
    list-style-type: none; 
 
} 
 

 
li a { 
 
    padding: 10px 10px 10px 20px; 
 
    text-decoration: none; 
 
    color: white; 
 
}

<div id="navbar"> 
 

 
    <ul> 
 
    <h1 id="logo">Jordan Baron</h1> 
 
    <li><a href="#">About Me</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    <li><a href="#">Projects</a></li> 
 
    </ul> 
 

 
</div>

Answer 3

といくつかのHTMLの改善と即興でflexboxソリューション。

body { 
 
    margin: 0; 
 
} 
 
header { 
 
    color: white; 
 
    background: rgba(0, 0, 0, 0.5); 
 
} 
 

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

 
header, 
 
ul { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
} 
 

 
h1, 
 
h2 { 
 
    margin: 0.5rem 0; 
 
} 
 

 
h1 { 
 
    padding: 0 20px; 
 
} 
 

 
h2 { 
 
    text-align: center; 
 
} 
 

 
ul { 
 
    padding: 0 10px; 
 
} 
 

 
li { 
 
    padding: 10px; 
 
} 
 

 
li a { 
 
    color: white; 
 
    text-decoration: none; 
 
    transition: color 350ms ease-in-out; 
 
} 
 
li a:hover { 
 
    color: gold; 
 
}

<header> 
 
    
 
     <h1 id="logo">Jordan Baron</h1> 
 

 
     <ul> 
 
     <li><a href="#">About Me</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     <li><a href="#">Projects</a></li> 
 
     </ul> 
 
    
 
</header> 
 
<main> 
 
    <h2>Freelance Web Developer</h2> 
 
</main>