Foros del Web » Creando para Internet » CSS »

vertical-align para atras......

Estas en el tema de vertical-align para atras...... en el foro de CSS en Foros del Web. Tengo una capa: Código: <div class="derecha1"><? include("includes/menu-horizontal.html"); ?></div> y en css las propiedades de la misma son: Código: .derecha1 { width:656px; height:24px; float:right; background-image: url(../Images/barraremix.gif); ...
  #1 (permalink)  
Antiguo 12/07/2005, 20:46
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 13 años
Puntos: 1
vertical-align para atras......

Tengo una capa:

Código:
<div class="derecha1"><? include("includes/menu-horizontal.html"); ?></div>
y en css las propiedades de la misma son:

Código:
.derecha1 { width:656px; height:24px; float:right; background-image: url(../Images/barraremix.gif); font-size:15px;  vertical-align: middle; text-indent: 16px; font-family:Verdana, Arial, Helvetica, sans-serif;}
El problema es que no puedo lograr alinear el texto de la capa en el centro.
La sangria, el tipo de letra y el tamaño funcionan a exepcion del atributo que nombre.

El include no es mas que un archivo html con una linea de texto comun y corriente.
  #2 (permalink)  
Antiguo 12/07/2005, 21:32
Avatar de KnowDemon  
Fecha de Ingreso: julio-2004
Ubicación: Ciudad de México
Mensajes: 544
Antigüedad: 13 años, 5 meses
Puntos: 2
Hola,

La regla vertical-align no realiza la acción que pareces esperar. Se aplica a elementos en línea y sirve para "ajustar" la linea base de un texto (o elemento) con respecto a los que lo rodean.

Para conseguir el efecto que deseas tal vez sea mejor colocar un padding inferior y superior al div, aunque esto puede acarrearte problemas si es realmente necesario que tenga un alto "fijo" (en pixeles), tal y como especificas en tu ejemplo.

Otra solución es encerrar tu texto en otro elemento en bloque (otro div) y asignarle algo como:

position: relative; top: 50%;

Eso alineará la parte superior de tu texto al centro. Si conoces la altura del div interno puedes utilizar un margen superior negativo de la mitad de este:

margin-top: -34px; /*Suponiendo que mide 68px de alto*/
__________________
Mi pequeño espacio en la web: VisiónE
"El cosmos es todo lo que es, todo lo que fue, y todo lo que será alguna vez."

Última edición por KnowDemon; 12/07/2005 a las 21:48
  #3 (permalink)  
Antiguo 12/07/2005, 22:30
Avatar de braulito  
Fecha de Ingreso: abril-2004
Ubicación: Cusco - Perú
Mensajes: 597
Antigüedad: 13 años, 7 meses
Puntos: 8
Más fácil es usando la propiedad line-height
Código:
line-height: 24px;
Verás como se alínea verticalmente.
__________________
Braulio Soncco
braulio at buayacorp dot com
Buayacorp - Programación y Diseño
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 00:48.