Question

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

我尝试将此添加到链接.home .reviews .store .contact，但这只是移动边框。填充顶：20像素; 边距：20像素;

这是我的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

您可以在指向垂直中心的链接上使用 line-height 属性：

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;
}

垂直对齐导航链接文本

2 个答案: