Mover texto hacia arriba dentro de la imagen de fondo CSS

Por lo general, estoy muy al día con CSS y puedo resolver la mayor parte, sin embargo, esto me tiene perplejo.

Básicamente, en nuestro widget, el texto en el botón 'Haga clic aquí' debe moverse hacia arriba para que haya un espacio igual por encima y por debajo de ese texto (en relación con el cuadro rojo).

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

El sitio web en cuestión es http://foscam-uk.com/index.php si quieres ver lo que te pido.

Gracias por la ayuda.

preguntado el 12 de junio de 12 a las 17:06

aunque no relacionado con queeastation. pero su sitio web usa muchos javascripts. Tty para combinar en uno. -

De hecho, todo esto se combinará antes de que el sitio se active. Aunque gracias por el comentario :) -

4 Respuestas

No puedo hacer que su código funcione (creo que puede faltar algo del resto de su css). Pero debería poder centrarlo configurando el line-height lo mismo que la altura del contenedor (24px en este caso).

Respondido el 12 de junio de 12 a las 17:06

No hay necesidad de usar span para eso. Intente hacer fondos de botones a través de css solo, ya que reducirá las solicitudes http inútiles.

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

Y se puede hacer css para este botón en particular

#thisPartButton{
color:white;
background:#CE0B08;  //replace it with your image
padding:7px;
}

Respondido el 12 de junio de 12 a las 17:06

Hay otro estilo que se usa en su página más allá del que pegó aquí que hace que la ubicación vertical del texto del botón esté donde está.

button.btn-cart span (en la línea 203 de su styles.css) tiene line-height:31px;

Reduzca esa altura de línea (25 px parecían razonables en mi prueba local) para corregir la ubicación del texto.

Respondido el 12 de junio de 12 a las 18:06

¿No podría decir que el lapso con el texto es relativo y colocarlo en las coordenadas adecuadas?

¿O incluso margen superior / margen inferior?

De lo contrario, para la alineación vertical, intente aquí.

Respondido el 12 de junio de 12 a las 17:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.