ヘッダーのさまざまなテキストを縦にセンタリングしますか？

Question

これはおそらく非常に簡単に修正できますが、私はそれをやるのに苦労しています。

ヘッダーの名前とナビゲーションバーの両方を垂直に中央に表示します。私の現在のコードは、太字でフォントサイズが大きいので、私の名前を中心にしています。

これはコードです：

HTML：

<div id="header"> 
<ul> 
    <div id="header-wrapper"> 
    <div class="header-name"> 
     <li> 
     <a href="/index.html"> 
      <span class="first"><strong>First</strong></span> 
      <span class="last"><strong> Last</strong></span> 
     </a> 
     </li> 
    </div> 
    <div class="header-nav"> 
     <li> 
     <a href="">Contact</a></li> 
     <li> 
     <a href="">Portfolio</a></li> 
     <li> 
     <a href="">About</a> 
     </li> 
     <li> 
     <a href="">Home</a> 
     </li> 
    </div> 
    </div> 
</ul> 

CSS：

#header-wrapper { 
width: 960px; 
margin: 0 auto; 
position: relative; 
} 

#header ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: orange; 
box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.2); 
} 

#header .header-name li { 
float: left; 
} 

#header .header-nav li { 
float: right; 
vertical-align: middle; 
} 

#header li a { 
font-size: 15px; 
display: block; 
color: #FFF; 
text-align: center; 
padding: 20px 16px; 
text-decoration: none; 
} 

#header .header-name li a { 
font-size: 22px; 
} 



#header ul li a .first { 
color: #ccc; 
} 

#header a { 
vertical-align: middle; 
} 

Answer 1

あなたのHTMLは無効です。 ulには、直接の子としてliが必要です。代わりに、縦にそれらの要素を中心に#header-wrapperにdisplay: flex; align-items: center; justify-content: space-between;を追加し、言った、ネストされたliさん

との直接の子としてdiv秒を持っています。

#header-wrapper { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
} 
 

 
#header ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: orange; 
 
    box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.2); 
 
} 
 

 
#header .header-name li { 
 
    float: left; 
 
} 
 

 
#header .header-nav li { 
 
    float: right; 
 
    vertical-align: middle; 
 
} 
 

 
#header li a { 
 
    font-size: 15px; 
 
    display: block; 
 
    color: #FFF; 
 
    text-align: center; 
 
    padding: 20px 16px; 
 
    text-decoration: none; 
 
} 
 

 
#header .header-name li a { 
 
    font-size: 22px; 
 
} 
 

 
#header ul li a .first { 
 
    color: #ccc; 
 
} 
 

 
#header a { 
 
    vertical-align: middle; 
 
}

<div id="header"> 
 
<ul> <div id="header-wrapper"> 
 
    <div class="header-name"> 
 
     <li> 
 
     <a href="/index.html"> 
 
      <span class="first"><strong>First</strong></span> 
 
      <span class="last"><strong> Last</strong></span> 
 
     </a> 
 
     </li> 
 
    </div> 
 
    <div class="header-nav"> 
 
     <li> 
 
     <a href="">Contact</a></li> 
 
     <li> 
 
     <a href="">Portfolio</a></li> 
 
     <li> 
 
     <a href="">About</a> 
 
     </li> 
 
     <li> 
 
     <a href="">Home</a> 
 
     </li> 
 
    </div> 
 
    </div> 
 
</ul>