[Ovillo] [Novato]Centrar verticalmente el texto
Pedro Arana
pedro.arana.matus en gmail.com
Mie Mayo 24 18:19:21 UTC 2006
Hola lista!
Primero debo decirles que soy mas programador que diseniador, y que lo
que se de HTML + CSS es casi nulo.
Tengo un menu de varios Divs, cada div tiene un nombre que es mas o
menos del mismo tamanio, pero tengo unos que se pasan de la raya y son
muy grandes, por medio de programacion yo determino que tan grandes
deben ser los divs para que el texto mas grande quepa mas o menos
ajustado en la caja, pero los demas menus se ven algo extranios
alineados arriba, quisiera que tambien quedaran alineados al centro de
el cuadro, pero no encuentro en CSS la forma de alinearlos para que
queden al centro
Para resolverlo agregue una tabla de una celda usando valign y el
texto queda centrado dentro del DIV, ahora bien quisiera saber: ?como
lo hago sin usar la tabla extra?
Buscando un poco llegue a esta pagina:
[]http://www.w3schools.com/css/css_positioning.asp
Entonces se me ocurrio la genial idea de poner una imagen trasparente
de la altura de mi DIV y alinearla al centro con
vertical-align:middle;
Ahora bien, quitando el hecho de que tengo que generar dinamicamente
una imagen de el tamanio adecuado, se les hace una solucion buena? o
hay otra mas facil con alguna configuracion de CSS que no estoy
encontrando?
Gracias por sus sugerencias.
Pedro
PD:Les mando el codigo para que se den una idea del problema
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Menu </TITLE>
</HEAD>
<style type="text/css">
.menu {
text-align: center;
border-style: dotted;
height: 68px; /*este valor lo determino dinamicamente*/
width: 200px;
}
</style>
<BODY>
<DIV id="uno" class="menu">
Primer Elemento
</DIV>
<DIV id="dos" class="menu">
El elemento que me causa problema por que su nombre es largo y sin sentido
</DIV>
<DIV id="tres" class="menu">
Tercer Elemento
</DIV>
<DIV id="cuatro" class="menu">
<TABLE width="100%" height="100%" border ="0">
<TR>
<TD align="center" valign="center">Solucion provisional</TD>
</TR>
</TABLE>
</DIV>
</BODY>
</HTML>
--
"Hay dos clases de conocimiento. Podemos conocer un tema por nosotros
mismos, o bien conocer dónde encontrar información al respecto."
Samuel Johnson.
Más información sobre la lista de distribución Ovillo