Texto en boton centrado verticalmente

[Miaz]

Hola, tengo este botón

Código PHP:

  <button style="border: 0px none ; width: 80px; height: 24px; background-image: url(imagenes/boton.jpg);" onclick="javascript:formularioAceptar('andres')">Aceptar</button>  
   

Y en Chrome o IE por ejemplo se ve correctamente pero en Opera el texto se ve descentrado, mas arriba de lo que debería. Alguien sabe como puedo solucionarlo?


Gracias.

[RusO91]

cual es la medida del boton.jpg ?

[zerokilled]

en css, al menos en la version 2.1, no hay propiedad para realizar alineacion vertical como lo hariamos en una celda de las tablas <td valign="middle">. comunmente utilizo padding top y bottom para alinearlo verticalmente pero tengase en cuenta que la altura total varia con el contenido del elemento.

[Miaz]

Iniciado por RusO91

cual es la medida del boton.jpg ?

Es de 80px x 24px También.

Como podría centrarlo con paddings? Es que como en cada navegador se ve una forma?

[RusO91]

probá esto:

HTML:

<input type="submit" value="Enviar el formulario" />

CSS:

input{
background:url('imagen.jpg');
height: 24px;
width: 80px;
}

[WinderJerter]

hola que tal, yo en las FAQ publique sobre como centrar verticalmente dentro de un div, no sirve en los input, pero no he probado en los botones, pero aqui esta el aporte:

• display:table-cell;
• vertical-align:middle;

Ejemplo:

Código:

<style type="text/css">
#vertical {
	background:#999;
	color:#CCC;
	display:table-cell;  /*Propiedad obligatoria*/
	height:30px; 
	text-align:center;
	vertical-align:middle; /*Propiedad obligatoria*/
	width:300px;
}
</style>

Solo le aplicas un id o un class al boton y me habisas si funciona

EDIT: Mira envés de poner la altura con height ponla con line-height

Saludos!!!

[jomaruro]

Hola:

Yo también te aviso, a ver si escribimos mejor ¿ok?

Iniciado por WinderJerter

Solo le aplicas un id o un class al boton y me habisas si funciona

%&$$·!¡

Saludos.