Texto vertical: Mismo problema, ninguna solución

[hey_alan]

Hola a todos.

Bien, antes que nada disculpen por esta consulta tan repetida en el foro, pero después de estar largo tiempo buscando, no he encontrado una solución "real".

No me sirve "line-height" debido a que el texto tiene más de una línea .

He intentado aplicando "display:table-cell" y usando "vertical-align" y explorer no lo muestra.

El caso es simple: tengo una clase de enlace que tiene un alto de 70px y ancho de 166px, y quiero que el texto quede alineado al centro (vertical, claro).

Sé que no es "necesario", pero les dejo el CSS:

Código:

menu a{background:url(leaf1.gif); width:166px; height:70px; border:0; color:#FFFFFF; font-weight:bold; text-decoration:none; display:block;}

HTML:

Código HTML:

<ul>
<li class="menu"><a href="index.html">Portada</a></li>
<li class="menu"><a href="#">Dibujos</a></li>
<li class="menu"><a href="#">Composiciones literarias</a></li>
<li class="menu"><a href="#">Cuento</a></li>
</ul> 

Claro, no tiene por qué funcionar ya que aún no le he puesto nada :P

Saludos

[cleft]

Porque no intentas definiendole un padding top y bottom del mismo valor?
Digamos, si deseas que tu boton sea de x alto (height) nada mas lo declaras como bloque (display: block;) le define un padding top y bottom que se acerque al valor que deseas.

Con eso deberia verse "centrado" verticalmente. Claro, habra que cranearle los valores, tomando en cuenta el valor inicial de la fuente.

[hey_alan]

Muchas gracias por tu respuesta cleft.

El problema está en el enlace de "composiciones literarias" ya que como es un término "largo", me crea un salto de línea y por lo tanto desencaja.

Saludos.

[cleft]

No se si tienes acceso a la estructura o solo al CSS. Ya que, podrias crear una clase y aplicarla a aquellos elementos que contengan dos lineas.
Si el estilo para los <a> fuese:

Código:

#menu a {
padding: 30px 10px;
background: url();
color: #333;
}

Entonces, podrias crear una especial alterando nada mas el relleno:

Código:

#menu a.doble {
padding: 15px 10px;
}

Y asignar dicha clase:

Código:

<ul>
<li class="menu"><a href="index.html">Portada</a></li>
<li class="menu"><a href="#">Dibujos</a></li>
<li class="menu"><a href="#" class="doble">Composiciones literarias</a></li>
<li class="menu"><a href="#">Cuento</a></li>
<li class="menu"><a href="#" class="doble">Lorem Ipsum Dolor Sit Amet</a></li>
</ul>