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