垂直对齐导航 link 文本

Question

我的目标是让文本链接与搜索文本居中对齐，但是我希望每个链接周围的边框保持原样。基本上我如何在不移动边框的情况下将文本居中。

我试过将其添加到链接 .home .reviews .store .contact 中，但这只是移动了边界。填充顶部：20px；边距顶部：20px;

这是我的HTML：

<div id="navigation">

<nav class="navbar">
                <div class="navbarcontainer">
                    <ul class="nav navbar-nav">
                        <li class="home"><a href="#">Home</a></li>
                        <li class="reviews"><a href="#">Reviews</a></li>
                        <li class="store"><a href="#">Store</a></li>
                        <li class="contact"><a href="#">Contact</a></li>
                    </ul>
                </div>
            </nav>

这是我的CSS：

/* NAVIGATION */


li {
    display:inline-block;
    float:left; 
    border:1px black solid;
    padding-left:12px;
    padding-right:12px;
    height:60px;
}

a:link, a:visited {
    text-decoration: none;
    color:#fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
}

这是它目前的样子：http://imgur.com/0GVums0

感谢您的帮助

Answer 1

一种方法：

li {
    display: block;
    float: left;
    border: 1px black solid;
}

a {
    padding: 19px 12px;
    display: block;
}

a:link, a:visited {
    text-decoration: none;
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
}

Codepen example

Answer 2

您可以在垂直居中的链接上使用行高属性：

a:link, a:visited {
    text-decoration: none;
    color:#fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 60px;
}

或者，您也可以使用 vertical-align: middle，但请记住，这种方法并不完全兼容所有浏览器 (IE8+)。

li {
    display:table;
    float:left; 
    border:1px black solid;
    padding-left:12px;
    padding-right:12px;
    height:60px;
}

a:link, a:visited {
    text-decoration: none;
    color:#fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    display: table-cell;
    vertical-align: middle;
}

垂直对齐导航 link 文本

Vertical align navigation link text

html

css

navigation