Foros del Web » Creando para Internet » CSS »

Texto en boton centrado verticalmente

Estas en el tema de Texto en boton centrado verticalmente en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/01/2010, 13:19
 
Fecha de Ingreso: noviembre-2009
Mensajes: 11
Antigüedad: 8 años, 1 mes
Puntos: 0
Pregunta Texto en boton centrado verticalmente

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.
  #2 (permalink)  
Antiguo 09/01/2010, 14:21
Avatar de RusO91  
Fecha de Ingreso: enero-2008
Ubicación: Rosario
Mensajes: 91
Antigüedad: 9 años, 11 meses
Puntos: 2
Respuesta: Texto en boton centrado verticalmente

cual es la medida del boton.jpg ?
  #3 (permalink)  
Antiguo 09/01/2010, 14:24
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Texto en boton centrado verticalmente

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.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #4 (permalink)  
Antiguo 09/01/2010, 14:38
 
Fecha de Ingreso: noviembre-2009
Mensajes: 11
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Texto en boton centrado verticalmente

Cita:
Iniciado por RusO91 Ver Mensaje
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?

Última edición por Miaz; 09/01/2010 a las 14:45
  #5 (permalink)  
Antiguo 09/01/2010, 15:50
Avatar de RusO91  
Fecha de Ingreso: enero-2008
Ubicación: Rosario
Mensajes: 91
Antigüedad: 9 años, 11 meses
Puntos: 2
Respuesta: Texto en boton centrado verticalmente

probá esto:

HTML:

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

Cita:
input{
background:url('imagen.jpg');
height: 24px;
width: 80px;
}
  #6 (permalink)  
Antiguo 09/01/2010, 22:29
 
Fecha de Ingreso: agosto-2009
Mensajes: 292
Antigüedad: 8 años, 3 meses
Puntos: 5
Respuesta: Texto en boton centrado verticalmente

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!!!

Última edición por WinderJerter; 09/01/2010 a las 23:02
  #7 (permalink)  
Antiguo 10/01/2010, 03:31
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Texto en boton centrado verticalmente

Hola:

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

Cita:
Iniciado por WinderJerter Ver Mensaje
Solo le aplicas un id o un class al boton y me habisas si funciona
%&$$·!¡

Saludos.


Etiquetas: botones, centrar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:55.