html - 垂直居中标题中的各种文本？

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 作为直接子代。相反，您将 div 作为具有嵌套 li

的直接子级

也就是说，添加 display: flex;对齐元素:居中； 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>