Question

所以我在stackoverflow.com和其他各种网站上通过各种其他问题进行了几次搜索，以解决我一直遇到的这个问题。我没有运气尝试我发现的一切。我正在使用CSS来设置这些按钮的样式，以便在网站上使用，我无法在Firefox中将文本垂直居中。它以Google Chrome和Internet Explorer为中心（我很疯狂）。但是，在小提琴中，文本似乎不会在Google Chrome中垂直居中。

这是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/

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

希望有所帮助！

Answer 2

vertical-align不适用于按钮的对齐文本。如果你从css中删除vertical-align没有任何反应，如果你把它设置为顶部或再次没有任何变化。问题是因为行高属性。如果你删除它一切都将是okey。

无法将按钮文本设置为垂直居中

2 个答案: