Question

我正在尝试使用CSS我的导航栏。我以前使用表进行了尝试，但效果很好，但我现在正尝试使用无序列表并设置样式。无论我做什么，文本都不会出现在按钮的中间。

我尝试过使用：
- text-align：center;
- vertical-align：middle;
- 位置：绝对
- 浮动：中心

您可以在我的代码In this JSFiddle或更低版本中看到按钮：

.mainheader nav {
    height: 85px;
    width: 100%;
    font-family: Calibri;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-left: 41.55%; /* margin for Chrome */
    -moz-margin-start: 41.8%; /* margin for Mozilla firefox */
}

.mainheader nav ul{
    list-style:none;
    margin: 0 auto;
}

.mainheader nav ul li{
    float: left;
    display: inline;
}

非常感谢您提出的任何想法。

Answer 1

.mainheader nav a:link, .mainheader nav a:visited{
    color:#AB6F80;
    display: block;
    padding: 7px 20px;
    /* Come back here to assign height */
    height:71px;
   line-height:71px;
}

添加了行高 - 这可以正常使用链接中的一行文本... http://jsfiddle.net/tbh62k9q/2/

Answer 2

您可以通过删除高度并仅使用填充来更改代码。像这样：

.mainheader nav a:link, .mainheader nav a:visited{
   color:#AB6F80;
   display: block;
   padding: 33px 20px;
   /* Come back here to assign height */

}

或者添加line-height与元素的高度相同。

Answer 3

另一种方法是将按钮包装在div中，移除浮动并使边距自动化。工作示例：http: / /jsfiddle.net/madcowley/ondptw5h/

.centerme {
  width: 100%;
  text-align: center;
}
<div class="centerme">
 <img...
</div>

另请参阅here以获取更多解释，以防万一。

为什么我的按钮文本不会在按钮[CSS]的中间垂直对齐？

3 个答案: