Question

通常情况下，我对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。

感谢您的帮助。

Answer 1

我无法让你的代码工作（我认为它可能会丢失你的其他css的东西）。但是你可以通过将line-height设置为与容器高度相同（在这种情况下为24px）来使其居中。

Answer 2

没有必要使用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;
}

Answer 3

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

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

减少行高（25px在我的本地测试中看起来合理）以纠正文本放置。

Answer 4

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

甚至保证金最高/保证金最低？

否则，对于垂直对齐，请尝试here。

移动文本在CSS背景图象里面

4 个答案: