Foros del Web » Creando para Internet » CSS »

alinear texto dentro de un button con imagen

Estas en el tema de alinear texto dentro de un button con imagen en el foro de CSS en Foros del Web. Hola amigos estoy insertanto unos botones con imagenes asi <button name="boton_1" type="button" > <div align="center"><img src="Images/secc_find.gif" width="28" height="28" border="0">Buscar</div> </button> el problema es que el ...
  #1 (permalink)  
Antiguo 15/09/2006, 09:13
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 21 años, 4 meses
Puntos: 21
alinear texto dentro de un button con imagen

Hola amigos estoy insertanto unos botones con imagenes asi

<button name="boton_1" type="button" >
<div align="center"><img src="Images/secc_find.gif" width="28" height="28" border="0">Buscar</div>
</button>



el problema es que el texto queda muy abajo y deseo que quede en medio pero que tampoco mueva la imagen

saludos
__________________
gerardo
  #2 (permalink)  
Antiguo 15/09/2006, 12:57
 
Fecha de Ingreso: marzo-2006
Mensajes: 27
Antigüedad: 18 años, 8 meses
Puntos: 0
Trata dando le etributo "float:left" a la imagen, esto debido al comportamiento de las imagenes

++++++
imagen+
++++++ Aqui continua la linea te texto

Con el float left a la imagen, esta se vera asi

++++++ Linea de texto
imagen+
++++++

Y en ese caso unicamnete decides como colocar el texto..

Otra solucion seria que el texto lo pocicionaras de manera absoluta (donde el boton este posicionado "relative"
  #3 (permalink)  
Antiguo 15/09/2006, 13:07
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 21 años, 4 meses
Puntos: 21
Discupla pero no te entendi bien mira lo que hice fue esto
pero no queda centrada el texto


<button name="boton_1" type="button" >
<div align="center"><img src="Images/secc_find.gif" width="28" height="28" border="0"><span class="textboton">Buscar</span></div>
</button>

este es css del span
.textboton
{
font:Arial, Helvetica, sans-serif;
font-size: 9px;
color: #666666;
vertical-align:top;
text-decoration:underline;
}

pero pos no queda aun poniendo middle asi que puse top

saludos
__________________
gerardo
  #4 (permalink)  
Antiguo 20/09/2006, 15:46
 
Fecha de Ingreso: marzo-2006
Mensajes: 27
Antigüedad: 18 años, 8 meses
Puntos: 0
El atributo float:left, agregado a la iamegn la va a hacer flotante, y una ves echo esto colocas el texo, y puedes modificar como se pociciona mediante padings o con unidades absolutas.
1- solucion con padings:
le agregas el float a la imagen style="float:left;"

.textboton
{
font:Arial, Helvetica, sans-serif;
font-size: 9px;
color: #666666;
vertical-align:top;
text-decoration:underline;
padding-top: (aqui pones unidades para que lo cloque mas abajo)
}

solucion con posocionamiento absoluto
En esta solucion al div que tienes dale el atributo relative
position:relative;

.textboton
{
position:absolute;
top: Con estos valores lo colocas
left: con estos valores lo colocas
font:Arial, Helvetica, sans-serif;
font-size: 9px;
color: #666666;
vertical-align:top;
text-decoration:underline;
}
En esta solucion el relative del div es importante, si lo omites lo descuadra
espero te sirva

Y como sugerencia adicional prueba usando in id o una clase para el div
en lugar del align="center" css te da mas flexibilidad
  #5 (permalink)  
Antiguo 20/09/2006, 15:49
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 21 años, 4 meses
Puntos: 21
De acuerdo

gracias dario-g
esperaba una respuesta nuevamente, probare los cambios que sugieres
gracias

saludos
__________________
gerardo
  #6 (permalink)  
Antiguo 21/09/2006, 13:22
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 23 años
Puntos: 1
y si le pones a la imagen align="absmiddle" ?
__________________
On error no hago nada porque deje de fumar...
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 03:40.