Comunidad PHPeros
Lenguajes => CSS => Mensaje iniciado por: G12 en 08 de Agosto de 2011, 14:51:34 pm
-
Hola a tod@s.
Estos días me he animado a aprender CSS, mi ultima duda fue sobre una barra que llegaba de extremo a extremo que conseguí resolver gracias a westwest.
Ahora tengo un pequeño problema que no consigo solucionar.
Tengo una barra, de el tamaño de 34px de alto.
Algo así:
(http://imagengratis.org/images/lineanegra.png)
Y querría meter ahi dentro un div con letras.
Pero claro al meter el div se queda arriba, lo que no se es como hacer o utilizar (creo que es padding) para que el div quede en el medio y las letras queden centradas de alto.
Me explico, al crear el div las letras se me quedan arriba (por que el div (la caja)) se me queda arriba, lo que querria es que el div se me quedara centrado en el medio.
Se me queda:
(http://imagengratis.org/images/dudamv4gm.png)
Quiero que se me quede:
(http://imagengratis.org/images/duda2.png)
Un saludo, gracias!
-
Utiliza line-height: 34px; y debería centrarse, aplícaselo al div, claro está.
Saludos.
-
¡Gracias! +Karma!
Aún que no esta del todo resuelto, falta algo y si eres tan amable me lo podrías decir.
No quiero que el div este en el medio si no que este un poco corrido hacia la derecha.
¿Como tendría que hacer para desplazarlo para la derecha?
-
Podrías usar padding-left: Xpx; Ésto añade X píxeles de espacio a la izquierda, haciendo que el texto aparezca más hacia la derecha. El tema es que si tienes definido un width, deberás restarle el padding, es decir, si tienes width:100px; y le añades un padding-left de 20px, deberias poner width: 80px.
Peeero, las versiones de IE inferiores al 9 te tocarán las narices con eso, de todas maneras, si no tienes un width definido, lo mismo da.
-
Tengo un pequeño problema.
Ya lo he conseguido hacer, he puesto esto:
.barra {
height:35px;
line-height:34px;
padding-left:1200px;
background:url(imagenes/linea_negra.png)
}
El problema es que los que tienen una pantalla mas pequeña que 1200 de resolución les sale la barra para correr (vamos que no se adapta a su resolucion) ¿como podría hacerlo?
-
Podrías usar porcentajes, o usar text-align:right; para que el texto quede a la derecha y padding-right para separarlo.