html - 如何移动文本列表项以与图像列表项对齐

Question

嗨，我是 CSS 的新手，谁能帮我把文字向下移动，使其与我的 Logo 图片对齐？另外作为该问题的扩展，有谁知道我如何让文本移动，以便两边的边距匹配？这就是现在的样子:

这是 html:

<div id="header">
    <div class="wrap">
        <nav id="topnav"> <!-- This is the top nav bar-->
            <ul id="topnavlist">
                <li> <!-- Home logo-->
                    <div class="logo">  
                        <a href="index.html"><img src="images/TechNow Logo 0.2.jpg" alt="TechNow Logo" height="70" width="auto"></a>
                    </div>
                </li>
                        <div class="navItems"><!-- Nav items-->
                    <ul>
                    <li><a href="#" class="NavItem">UK News</a></li>
                    <li><a href="#" class="NavItem">Smartphones</a></li>
                    <li><a href="#" class="NavItem">Reviews</a></li>
                    </ul>
                </div>
            </ul>
        </nav>
    </div>
</div>

还有 CSS:

    #header, #footer {
    background-color:#115279;
    float:left;
    padding:15px 0;
    min-width:100%;
}

.wrap {
    position:relative;
    margin:0 auto;
    width:960px;
}

#topnavlist  li {
    font-family: verdana, sans-serif;
    color:#D9330F;
    list-style-type: none;
    float: left;
    display:inline;
    padding: 10px;
}

.navItems {
    height: 20%;
    display: inline;
    margin-top:30px;
    padding-top: 50px;
    padding: 50px;

}

Answer 1

您的 HTML 无效，li 中不能有 div。将 div 替换为 li 并将其子项(li)包装在 ul 中。

要使 li 垂直居中，给 .navItems 一个 height: 50px 与你的标志的高度相同，并给它一个 line-height: 50px(高度)

#header,
#footer {
  background-color: #115279;
  float: left;
  padding: 15px 0;
  min-width: 100%;
}
.wrap {
  position: relative;
  margin: 0 auto;
  width: 960px;
}
#topnavlist li {
  font-family: verdana, sans-serif;
  color: #D9330F;
  list-style-type: none;
  float: left;
  display: inline;
  padding: 10px;
}
.navItems {
  display: inline;
  height: 50px;
  line-height: 50px;
}

<div id="header">
  <div class="wrap">
    <nav id="topnav">
      <!-- This is the top nav bar-->
      <ul id="topnavlist">
        <li>
          <!-- Home logo-->
          <div class="logo">
            <a href="index.html">
              <img src="http://dummyimage.com/100x50/000/fff" alt="TechNow Logo" height="70" width="auto">
            </a>
          </div>
        </li>
        <li class="navItems">
          <!-- Nav items-->
          <ul>
          <li><a href="#" class="NavItem">UK News</a>
          </li>
          <li><a href="#" class="NavItem">Smartphones</a>
          </li>
          <li><a href="#" class="NavItem">Reviews</a>
          </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</div>