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

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

1 个答案: