1

因此，我通过 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/

4

2 回答 2

2

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

我通常会用 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 吗？使用填充，您可以保持 18px-20px 的正常行高，并且按钮很好地符合多行。

希望有帮助！

于 2013-07-30T21:15:26.377 回答
0

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

于 2013-07-30T21:18:07.097 回答