Question

我最近遇到这种行为，当客户报告页面上的某些按钮具有垂直居中的文本而其他按钮没有。

事实证明，按钮会将文本垂直居中，但链接却不会。示例：http://jsfiddle.net/valentin/7EjtD/

a, button{
    height: 200px;
    background-color: #ff6400;
    color: #fff;
    font-weight: bold;
    display: inline-block;
    vertical-align: top;
    border: 0;
    padding: 20px;
    font-family: sans-serif;
    text-decoration: none;
}

除了使用line-height之外，有没有办法将此行为添加到链接？

Answer 1

按钮是内联块元素，而锚点只是内联。您可以使用填充来实现相同的效果：

a
{
    padding: 91px 20px; /*  <---(height-fontSize)/2  */
    height: auto;
}

JSFiddle

Answer 2

按钮与中间对齐，因为它是默认行为。你的小提琴实际上是对齐的。

为了使它工作，你可以将你的元素包装在display:table元素上，就像div一样。然后将按钮和链接设置为display:table-cell。然后你的vertical-align将起作用。像这样：

<div class="wrapper">
    <a href="#">LINK</a>
    <button>BUTTON</button>
</div>

和css：

*{
    box-sizing: border-box;
}

div.wrapper {
    display:table;
}

a, button{
    height: 200px;
    background-color: #ff6400;
    color: #fff;
    font-weight: bold;
    display: table-cell;
    vertical-align: middle;
    border: 0;
    padding: 20px;
    font-family: sans-serif;
    text-decoration: none;
}

Answer 3

TableData（TD AKA cell ）在默认文本居中方面非常出色;）

<强> live demo

a{
  display: table-cell;
  vertical-align: middle;
}

为了清洁代码，我会使用一个特殊的类，如：

a.buttonAlike{

Answer 4

对不起伙计们！没看到他想避免线高。原帖：

添加等于元素高度的行高。在这种情况下：

line-height: 200px;

DEMO：JSFIDDLE

以<a> vs <button></button></a>为中心的垂直文字

4 个答案:

JSFiddle