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

Question

我正在尝试使用 CSS 我的导航栏进行样式设置。我之前用 table 尝试过，效果很好，但是我现在尝试用 未排序的列表 并对其进行造型。无论我做什么，文本都不会到达按钮的中间。

我尝试使用：
- 文本对齐：居中；
- 垂直对齐：中间；
- 位置：绝对
- float:center

您可能会在我的代码 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;
}

添加行高 - 这将适用于 link 中的一行文本... 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] 的中间垂直对齐？

Why won't my button text align vertically in the middle of the button [CSS]?

css

text

center

button

alignment