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

Question

您对CSS的新手可以帮助我让文字向下移动，以便与我的徽标图片保持一致吗？此外，作为该问题的延伸，是否有人知道我如何使文本移动，以便任何一方的边距匹配？ 这就是现在的样子：

这是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

您不能将div元素作为ul元素的子元素。至于对齐所有元素。默认情况下，img和a元素在css中被视为inline个元素。您可以在内联元素上使用vertical-align属性。所以你的标记可能会更简单，比如

<nav id="topnav">
  <a href="index.html"><img src="images/TechNow Logo 0.2.jpg" alt="TechNow Logo" height="70" width="auto"></a>
  <a href="#" class="NavItem">UK News</a>
  <a href="#" class="NavItem">Smartphones</a>
  <a href="#" class="NavItem">Reviews</a>
</nav>

然后是css

#topnav a {
  vertical-align: middle;
}

由于我没有图片的确切尺寸，这不会让您得到您正在寻找的东西，但它应该让您走上正确的轨道。主要是确保您有有效的HTML标记。如果不是这样，这可能会导致css的许多麻烦和问题。

Answer 2

您的HTML无效，div内无法li。将div替换为li，并将他们的孩子（li s）换成ul。

要将li垂直居中，请将.navItems height: 50px与徽标的高度相同，并为其设置line-height: 50px（height）< / p>

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

Answer 3

如上所述，您当前的HTML无效。 li必须是ul的儿童（以及唯一的直接子女）。

实际上根本不需要使用div。

    #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;
      display: inline-block;
      vertical-align: middle;
      padding: 10px;
    }
    .NavItem {
      color: white;
    }

<div id="header">
  <div class="wrap">
    <nav id="topnav">
      <!-- This is the top nav bar-->
      <ul id="topnavlist">
        <li>
          <!-- Home logo-->
          <a href="index.html">
            <img src="http://placehold.it/70x70" alt="TechNow Logo" height="70" width="auto" />
          </a>

        </li>
        <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>
    </nav>
  </div>
</div>