如何使一个div高于另外两个div

Question

我有这个CSS代码：

    #naviga {
text-align:center;
  padding-top: 20px;
}

#nav {
display:inline;
  padding-top: 0px;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-box-shadow: 0 0 0 0 #ffffff;
  box-shadow: 0 0 0 0 #ffffff;
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  transition: all 250ms linear;
}

#nav a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-box-shadow: 0 0 0 0 #ffffff;
  box-shadow: 0 0 0 0 #ffffff;
  -webkit-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  transition: all 250ms linear;
  padding-bottom: 3px;
  letter-spacing: 1px;
  margin-left: 20px;

}

#nav a:hover {
  -webkit-box-shadow: #fff;
  box-shadow: 0 3px 0 0 #fff;
  opacity: 0.7;
}

#loggo {
display:inline;
  background-image: url(http://i.imgur.com/qhrrawQ.png);
height: 50px;
width: 55px;
margin-left: 20px;
}

...以及此HTML代码：

<div id="naviga">
<div id="nav"><a href="">uno</a> <a href="">due</a> <a href="">tre</a></div>
<div id="loggo"></div> 
<div id="nav"><a href="">quattro</a> <a href="">cinque</a> <a href="">sei</a></div> 
</div>
</div> 

这就是出现的结果：

这就是我想要的结果：

我该怎么办？

Answer 1

您正在使用display:inline，虽然我更喜欢inline-block。

您需要将vertical-align设置为middle，默认为baseline。

注意：您使用相同的ID（＃）多次无效。所以我把它们换成了课程。

   .naviga {
     text-align: center;
     padding-top: 20px;
   }
   .nav {
     display: inline-block;
     vertical-align: middle;
     padding-top: 0px;
     color: blue;
     text-transform: uppercase;
     text-decoration: none;
   }
   .nav a {
     padding-bottom: 3px;
     letter-spacing: 1px;
     margin-left: 20px;
   }
   .loggo {
     display: inline-block;
     vertical-align: middle;
     background: red;
     height: 50px;
     width: 55px;
     margin-left: 20px;
   }

<div class="naviga">
  <div class="nav"><a href="">uno</a>  <a href="">due</a>  <a href="">tre</a>
  </div>
  <div class="loggo"></div>
  <div class="nav"><a href="">quattro</a>  <a href="">cinque</a>  <a href="">sei</a>
  </div>
</div>

Answer 2

将vertical-align: middle添加到班级

Read more about align here

Answer 3

您无法为内联元素添加高度。只需将您的列表项更改为display:block;（或inline-block），然后指定高度等于徽标高度，如下所示：

#nav a{
    display: block;
    line-height: 50px;
    float:left;
    background: none;
    margin: 0px 10px;
}

以下是上述代码的jsfiddle：http://jsfiddle.net/AndrewL32/65sf2f66/44/