使用位置：绝对使顶部导航项垂直对齐

Question

我正在构建顶部导航栏。我希望右侧的徽标和菜单项垂直居中。为此，我希望将徽标和菜单项的容器的位置设置为相对，然后将徽标和菜单项的位置设置为绝对以达到效果。

这已成功地用于徽标。但是，它不适用于菜单项，实际上，一旦实现以下代码，所有菜单项都将消失。不知道这是怎么回事。

<div class="boxA">

<div class="box1">
  <div class="site">
    <a href=""><img src="img/logo.png"></a>
  </div> 
</div>

<div class="box2">
<nav class="menu"> 
  <ul>
      <li><a href="">menu1</a></li>
      <li><a href="">menu2</a></li>
      <li><a href="">menu3</a></li>
      <li><a href="">menu4</a></li>
  </ul>
</nav>
</div>

</div>



    
.boxA:after {
  content:"";
  display: block;
  clear: both;
}

.boxA {
  height: 100px;
  position: relative;
  border-bottom: 1px solid #E0DCDC;
}

.boxA img {
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translate(0, -50%);
}

.box2 li {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}


.box1 {
  float: left;
  width: auto;
}

.box2 {
  float: right;
  width: auto;
}




.box2 ul {
  margin: 0;
  padding: 0;
  list-style: none;  
}


.box2 li a {
  display: block;
  padding: 0px;
  color: inherit;
  text-decoration: none; 
  font-size: 12px;
}

.box2 li a:hover {
  text-decoration: underline;
}

.box2 ul:after {
  content: "";
  display: block;
  clear: both;
}

.box2 li {
  float: left;
  width: auto;
}


.box1 img {
  position: absolute;
  height: 20px;
}

Answer 1

body{margin:0}

.boxA {
    display: flex;
    flex-direction: row;
    background: #b6d6f3;
    border-bottom: 2px solid #8ac8ff;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5px;
}
.site img {
    width: 100px;
}
.menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.menu ul li a {
    text-decoration: none;
    padding: 2px 5px;
    display: inline-block;
}

<div class="boxA">

        <div class="box1">
          <div class="site">
            <a href=""><img src="https://www.smashingmagazine.com/images/smashing-cat/cat-with-slippers.svg"></a>
          </div> 
        </div>

        <div class="box2">
        <nav class="menu"> 
          <ul>
              <li><a href="">menu1</a></li>
              <li><a href="">menu2</a></li>
              <li><a href="">menu3</a></li>
              <li><a href="">menu4</a></li>
          </ul>
        </nav>
        </div>
</div>

尝试不要使用CSS float属性，而应使用css grid或css flex box。

编辑1：

如果您想在IE中看到相同的结果而不使用flex属性，那么。

.boxA:after {
  content:"";
  display: block;
  clear: both;
}

.boxA {
  height: 100px;
  position: relative;
  border-bottom: 1px solid #E0DCDC;
}

.boxA img {
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translate(0, -50%);
}

.box2 ul {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);

  /* -- NEW -- */
  right: 10px;
}


.box1 {
  float: left;

  /* -- NEW -- */
  width: 100PX;
  background-color: #cddef7;
  height: 100px;
}

.box2 {
    float: right;
    /* -- NEW -- */
    width: 50%;
    background-color: #85c3f9;
    height: 100px;
}

.box2 ul {
  margin: 0;
  padding: 0;
  list-style: none;  
}


.box2 li a {
  display: block;
  padding: 0px;
  color: inherit;
  text-decoration: none; 
  font-size: 12px;
  /* --NEW-- */
  padding:2px 0;
}

.box2 li a:hover {
  text-decoration: underline;
}

.box2 ul:after {
  content: "";
  display: block;
  clear: both;
}

/* DOES NOT REQUIRED--
.box2 li {
  float: left;
  width: auto;
}
*/


.box1 img {
  position: absolute;
  /* --NEW-- */
  width:80px;
}

<div class="boxA">

        <div class="box1">
          <div class="site">
            <a href=""><img src="https://www.smashingmagazine.com/images/smashing-cat/cat-with-slippers.svg"></a>
          </div> 
        </div>

        <div class="box2">
        <nav class="menu"> 
          <ul>
              <li><a href="">menu1</a></li>
              <li><a href="">menu2</a></li>
              <li><a href="">menu3</a></li>
              <li><a href="">menu4</a></li>
          </ul>
        </nav>
        </div>

        </div>