无法使按钮文本垂直居中答案

【问题标题】：Cannot Get Button Text to Center Vertically无法使按钮文本垂直居中
【发布时间】：2013-07-31 04:56:17
【问题描述】：

因此，我在 stackoverflow.com 和其他各种网站上对各种其他问题进行了多次搜索，以解决我一直遇到的这个问题。我没有运气尝试我发现的所有东西。我正在使用 CSS 为这些按钮设置样式以在网站上使用，但我无法让文本在 Firefox 中垂直居中。它以 Google Chrome 和 Internet Explorer 为中心（我知道这很疯狂）。然而，在小提琴中，文本似乎也没有在谷歌浏览器中垂直居中。

这是 CSS：

button {
    margin: 0;
    padding: 0;
}
button.slide_button {
    background-color: #E3E4F0;
    border: 1px #8C8C8C solid;
    border-radius: 25px;
    height: 25px;
    padding: 0px 5px;
    vertical-align: middle;
    line-height: 25px;
}
button.slide_button:hover {
    background-color: #E3E4F0;
    border: 1px #8C8C8C solid;
    border-radius: 25px;
    height: 25px;
    color: #F00;
}
button.slide_button:active {
    background-color: #BFBFE3;
    border: 1px #8C8C8C solid;
    border-radius: 25px;
    height: 25px;
}

这是 HTML（包含对我在网站上使用的 Javascript 函数的引用）：

<button id="slide_prev" class="slide_button" onClick="prevImg()">Previous</button>
<button id="slide_pause" class="slide_button" onClick="pauseShow()">Pause</button>
<button id="slide_next" class="slide_button" onClick="nextImg()">Next</button>

这里是小提琴：http://jsfiddle.net/59ven/

【问题讨论】：

这里有一个类似的解决方案。已经在 s.o stackoverflow.com/questions/2939914/… 上回答了
删除 line-height: 25px; 在 OSX 上的 Chrome 中有效。
如果它是一个 div，将 height 和 line-height 设置为相同的值会起作用。按钮是另一回事，这可以解释 stefanglase 的结果。无论如何，为什么要使用按钮？您已将其标记得如此之多，您可以轻松地将其设为 div，然后外观将更加可预测。
这是个好问题。无论如何，我可能应该只使用一个 div 。我想我一直专注于尝试解决这个问题，以至于我没想过简单地使用 div。以前，我不确定 div 是否有 onClick 属性，但我只是查了一下，发现有。我想我会尝试一个 div 并让你们知道它是如何工作的。
我尝试使用 div，但我遇到了同样的问题。

标签： html css

【解决方案1】：

我个人喜欢使用填充将文本居中放置在按钮上。这使您可以在所有浏览器上获得良好的垂直（和水平）居中，并且您可以控制上下间距。

我通常会用 css 做这样的事情（省略悬停效果）：

input[type="button"], input[type="submit"], a.btn:link, a.btn:active, a.btn:visited {
    background-color: #E3E4F0;
    border: 1px #8C8C8C solid;
    border-radius: 25px;
    padding: 5px 8px 5px 8px;
    text-decoration: none;
}

那么你可以这样使用它：

<input type="button" onclick="whatever" value="Button Text" />

或使链接看起来像按钮

<a href="#" class="btn">Button Text</a>

请注意，使用“height”和“line-height”属性会限制您。例如，如果您想要一个带有 2 行文本的按钮，您真的希望它们每行的行高为 25px 吗？使用 padding，您可以保持 18px-20px 的正常行高，并且按钮可以很好地适应多行。

希望有帮助！

【讨论】：

好的，按钮类型的标签比
我认为这并不重要。输入标签只是我的偏好。
完美，这是一个很好的解决方法。我希望我刚刚使用填充从一开始就使按钮变大。那个高度属性给了我跨浏览器的各种问题。非常感谢。

【解决方案2】：

vertical-align 不适用于对齐按钮的文本。如果您从 css 中删除垂直对齐，则不会发生任何事情，并且如果您将其设置为顶部或再次没有任何变化。问题是由于 line-height 属性。如果你删除它，一切都会好起来的。

【讨论】：

删除所有内容后，它可以在 Chrome 和 IE 中运行，但不能在 Firefox 中运行。
我刚刚删除了行高，然后在 Firefox 中进行了测试，文本在中间。只知道vertical-align在这里什么都不做。
我删除了行高和垂直对齐，文本位于底部。不过，我感谢您的帮助。