html - 不需要的空格

Question

我最近问了一个类似的问题，关于导航按钮和上下有空格，这个问题得到了很好的回答。这里是问题Navigation Buttons no whitespace underneathe

基本上现在我在按钮上方有空白，我需要关闭它。

此外，我希望按钮中的文本在垂直和水平方向上都居中。

Js fiddle :

http://jsfiddle.net/ygfX7/4/有什么想法吗？

html:

<div class="row">
    <div class="large-9 small-12 columns" id="contact-top-pad">
        <p>
            <span class="contact-top">Phone</span><span class="smaller">- 0757776856</span> 
            <span class="contact-top">Email</span><span class="smaller">- luke@bodymetrix.com</span>
    </div>
    <div class="large-3 small-10 columns" id="social-btn">
        <img src="img/facebook-btn.png" alt="Facebook">
        <img src="img/twitter-btn.png" alt="Twitter">
        <img src="img/pin-btn.png" alt="Pintrest">
        <img src="img/google-btn.png" alt="Google+">
    </div>        
    <hr>
</div>

<div class="row">
    <div class="large-6 small-12 columns">
        <div class="logo"><img src="img/logo.png" alt="Body Metrix"></div>
    </div>

    <div class="large-6 columns" id="nav-btn">
        <ul class="navigation">
            <li class="active"><a href="home.html">Home</a></li><!--
         --><li class="not"><a href="#">About</a></li><!--
         --><li class="not"><a href="#">Contact</a></li><!--
         --><li class="not"><a href="#">Services</a></li>
        </ul>
    </div>
    <hr>
</div><!--

CSS:

hr {
    margin:0;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

#social-btn{    
    display: inline;
    padding-left: 50px;
    padding-top: 20px;
}

#contact-top-pad {    
    padding-top: 25px;    
}

.contact-top {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: bold;
    display: inline;    
}

.smaller {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: lighter;    
}

.logo img {
    max-width: 35%;
    min-height: auto;
    padding-bottom: 10px;
}

.navigation { margin:0; }

谢谢

Answer 1

从 hr 中删除 border-bottom 以摆脱选项上方的小空间:

hr {
    margin:0;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

并且还添加一个 line-height: 100px; 到 .navigation li a ，这将使文本垂直居中:

.navigation li a {
    text-align: center;
    padding: 30px 10px 10px 30px;
    line-height:100px;
}

这是 fiddle :http://jsfiddle.net/ygfX7/5/