Centrar verticalmente texto de manera dinámica

pedrojo · #1 (**permalink**) 26/01/2007, 05:06

Hola, tengo un problema y es que estoy haciendo un menú de pestañas dinamicamente (lo que quiere decir que puede cambiar su altura dinamicamente dependiendo de la cantidad de texto que tengamos) y mi problema es que no he encontrado manera que me centre el texto verticalmente. Os pondré un ejemplo: Si tengo 3 pestañas y una es más larga que las demás las otras dos automaticamente se tienen que hacer del mismo tamaño (para que quede esteticamente mejor), pero mi problema es que al hacerse más grande y tener tan poco texto quiero que se centro dentro de la imagen de la pestaña para que quede bonito. Logicamente si es dinámico no me sirve marcarle un tamaño ni nada por el estilo porque nunca sabemos que tamaño puede tener. Si alguien me puede ayudar se lo agradecería mucho. Merci por adelantado y saludos.

Mikmoro · #2 (**permalink**) 26/01/2007, 06:23

Hay una manera de conseguirlo a través de display, con table y table cell en Firefox y inline-block en IE, pero para estar seguros sería mejor que pusieras tu código, porque según cómo tengas hecho el menú igual se puede no.

Mikel.

pedrojo · #3 (**permalink**) 29/01/2007, 02:23

Hola, lo primero de todo muchas gracias por interesarte por mi problema y querer ayudarme. Te paso un ejemplo simple de lo que es mi problema (para no pasarte todo el tostón que tengo), la primera parte es el htm (falta la línea del !DOCTYPE html PUBLIC) y la segunda el css:

<head>
<title>Ejemplo 1: Sliding Doors of CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="STYLESHEET" type="text/css" href="prueba.css">
</head>

<body>

<div id="tabs">
<div id="TabSelected">Home</div>
<div id="TabUnselected">News</div>
<div id="TabUnselected">Products dfadfasdfadfasdfasdfa dfa dfasdfasdfad adfadfasdfasdfasdfasdfadfasdfa df asdfadfasdfadf</div>
<div id="TabUnselected">News</div>
<div id="TabUnselected">About asdfasdf l asjksdflñasj flñdkasjflkdas flasdjñljk</div>
</div>

</body>

</html>

---------------------------(Ahora te paso el css)-------------

#body {
background:#fff;
margin:0;
padding:0;
color:#000;
font:x-small/1.5em Georgia,Serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
}

#TabSelected {
float:left;
width:20%;
font-weight:bold;
text-align:center;
border: 1px yellow solid;
padding-bottom: 999em;
margin-bottom: -999em;
}

#TabUnselected {
float:left;
width:19.8%;
background: grey;
text-align:center;
border: 1px black solid;
font-weight:bold;
padding-bottom: 999em;
margin-bottom: -999em;
}

#tabs {
overflow:hidden;
text-align:center;
border: 1px yellow solid;
height: 100%;
}

Mikmoro · #4 (**permalink**) 29/01/2007, 17:01

Hola, Pedrojo.
Hacer lo que quieres para firefox no es ningún problema, porque marcando el div contendor con display: table y los que están dentro con display: table-cell y vertical-align: middle funciona sin problema (no con el menú como lo tienes ahora, sino haciéndolo de otra forma), pero para IE es mucho más difícil.

Como según he visto que tienes el menú, no creo que vaya a quedar así, quiero decir, no incluyes enlaces y demás, así que para intentar encontrar una solución exacta para IE creo que sería mejor teniendo ya el menú como lo vas a querer tener, si no, buscar ahora una manera posible si luego vas a añadir otros elementos (vínculos, fondos, imágenes, etc.), podría no servir de nada, porque como te digo es complicadillo.

Un par de detalles para cuando sigas avanzando:
si pones la almohadilla en la clase body (#body) es como si no pusieras nada; body debe ir sin más:

body {
background:#fff;
margin:0;
... etc.

No deberías usar elementos con el mismo id. Un id debe ser para un elemento único, que aparezca llamado una sola vez en general. Para el caso donde lo has usado, deberías usar elemetos class, es decir:

si vas a usar varios div con la clase "TabUnselected", no pongas

#TabUnselected {
float:left;
width:19.8%;
... etc.

y luego <div id="TabUnselected">

sino:

.TabUnselected {
float:left;
width:19.8%;
... etc.

y luego <div class="TabUnselected">

Es mi opinión, y creo que lo más recomendable.
Si lo has hecho así por alguna razón concreta que desconozco discúlpame.

Mikel.

pedrojo · #5 (**permalink**) 30/01/2007, 06:06

Hola Mikel, gracias por tus consejos lo primero de todo. Pues la verdad esque lo que te pasé es un "boceto" de lo que tengo, en realidad si que hay hipervinculos en el texto y de fondo tengo una imágen. Lo que me has comentado del display:table y demás ya lo había probado como lo tengo ahora y es verdad que no me funciona, por eso no sabía que más hacer. Muchas gracias por tu ayuda.

Mikmoro · #6 (**permalink**) 30/01/2007, 06:14

Mira este pequeño ejemplo de cómo funciona para Firefox con display table:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Centrado vertical de menu</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />
  <style type="text/css">
#cont { margin: 0pt auto;
background-color: rgb(102, 204, 204);
overflow: auto;
vertical-align: middle;
display: table;
width: 400px;
}
a { vertical-align: middle;
background-color: rgb(204, 204, 255);
display: table-cell;
padding-left: 10px;
width: 6em;
height: 100%;
}
  </style>
</head>
<body>
<div id="cont"><a href="#A">uno</a><a
 href="#B">dos</a><a href="#C">tres,
cuatro
y&nbsp;cinco, seis, siete, ocho, nueve y diez</a></div>
</body>
</html>

Igual puedes sacar algo aprovechable de esto para tu caso.

Si quieres pon el código completo del menú como lo tienes (o lo subes a algún sitio), y por intentarlo, no perdemos nada.

Mikel.

pedrojo · #7 (**permalink**) 31/01/2007, 05:17

Pues de la manera que lo tengo yo hecho eso no funciona (ya lo había probado de esa manera), muchas gracias de todas formas y seguiré buscando si hay algo "milagroso" para mi ejemplo, sino lo encuentro en unos días ya cambiaré de "táctica". Muchas gracias de todas formas.

pedrojo · #8 (**permalink**) 05/02/2007, 02:14

Hola de nuevo, no hay alguien que sepa como hacerlo (aunque sea de una manera que no concuerde con lo que tengo hecho (si hace falta me curraré volverlo a cambiar todo). Help please!

Mikmoro · #9 (**permalink**) 05/02/2007, 04:29

Pon tu menú con los contenidos reales (me refiero a enlaces y eso), y quizá entre todos a alguien se le ocurra una buena solución.

Mikel.