Question

Usually I’m pretty on the ball with CSS and able to figure most of it out, however this has got me stumped.

Basically on our widget, the text in the ‘Click Here’ button needs to be moved up so there is an equal gap above and below that text (in relation to the red box).

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;
}

The website in question is http://foscam-uk.com/index.php if you wish to see what I am asking.

Thanks for the help.

Answer 1

I can’t quite get your code to work (I think it may be missing something from the rest of your css). But you should be able to center it by setting the line-height the same as the container height (24px in this case).