垂直中心標題中的各種文本？

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是無效的。 A ul需要有一個li作爲直接的孩子。相反，你必須div S作爲直接孩子的嵌套li

這就是說，加display: flex; align-items: center; justify-content: space-between;到#header-wrapper垂直居中的那些元素。

#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>