0

通常我很擅长使用 CSS 并且能够弄清楚其中的大部分内容，但这让我很难过。

基本上在我们的小部件上，“单击此处”按钮中的文本需要向上移动，以便该文本上方和下方有相等的间隙（相对于红色框）。

HTML： 

<button onclick="setLocation('amplifiers/pioneer-appradio-2-sph-da100.html/index.htm')" class="button btn-cart" title="Shop NOW" type="button">
<span><span>Click Here</span>

CSS：

.banner button {
    float: right;
    margin-top: 25px;
    margin-right: 40px;
}
.banner button span {
    background: transparent url(../images/media/slider_button_bg.png) 0 0 no-repeat!important;
    height: 24px;
    padding-left: 12px;
}
.banner button span span {
    background-position: 100% 0!important;
    padding-left: 0;
    padding- right: 12px;
    font-weight: bold;
    color: #FFFFFF;
}

如果你想看看我在问什么，有问题的网站是http://foscam-uk.com/index.php 。

谢谢您的帮助。

4

4 回答 4

3

我不能完全让你的代码工作（我认为它可能会从你的 css 的其余部分中丢失一些东西）。但是您应该能够通过将其设置line-height为与容器高度相同（在本例中为 24px）来使其居中。

于 2012-06-12T16:48:21.977 回答
1

没有必要为此使用 span 。尝试仅通过 css 制作按钮背景，因为它会减少无用的 http 请求。

    <button onclick="setLocation('speakers/pioneer-ts-g172ci.html/index.htm')" 
    class="button btn-cart" id="thisPartButton" title="Shop NOW" type="button">
Click Here</button>

并且可以为这个特定按钮制作 css

#thisPartButton{
color:white;
background:#CE0B08;  //replace it with your image
padding:7px;
}
于 2012-06-12T16:54:29.127 回答
1

除了您在此处粘贴的内容之外，您的页面中还使用了另一种样式，这导致按钮文本的垂直放置在它所在的位置。

button.btn-cart span （在你的styles.css的第203行）有line-height:31px;

减小行高（在我的本地测试中，25px 看起来很合理）以更正文本位置。

于 2012-06-12T17:04:50.783 回答
0

你能不能告诉带文本的跨度是相对的并将其放置在适当的坐标上？

甚至是margin-top / margin-bottom？

否则，对于垂直对齐，请在此处尝试。

于 2012-06-12T16:48:09.810 回答