如何讓一個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/