Problema centrado verticalemente celda??

[alfredorz]

Hola, estoy creando una tabla para una aplicación web.

Me he creado un estilo css para las celdas de la tabla, pero con el atributo vertical-align= middle; no me centra el texto verticalmente en las celdas.

Incluso poniendo el atributo valign="middle" directamente en la cabecera de la celda(<td valign="middle"> no consigue centrarmelo.

Utilizo Firefox 3.0

¿Sabéis a que se debe?

[DragonX]

podrías poner el código css que estas utilizando para toda la celda, tr y tablas?

[kseso?]

Hola Alfredo:
¿conoces www.araudi.net ?
Ahí el maestro Mikmoro tiene tres ejemplo de cómo centrar verticalmente el contenido utilizando css.
Un saludo

P.D.: añádela a favoritos

[alfredorz]

El estilo css que tengo implementado es:

Tengo que decir que soy un poco novato en esto de los estilos....

td {
font-family:verdana,arial;
font-size:8pt;
vertical-align: middle;

}
.estilotabla{

background-color:url(images/img01.jpg) no-repeat top left;
border-style:solid;
border-color:#07C4D7;
border-width:2px;

}
.estilocelda{
background-color:#F6FEFF;
border-style:solid;
border-color:#07C4D7;
border-width: 1px;
font-weight:bold;
font-size:10pt;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
vertical-align: middle;
color:#808080;/*#000000*/
}
.estilocabecera{
background-color:#00B4CF;/*COLOR MENU CABECERA= #0AC8D8*/
border-color:#07C4D7;
border-style:solid;
border-width: 1px;
font-weight:bold;
font-size:10pt;
text-align:center;
font-family:arial,helvetica,sans-serif;
color:#FFFFFF;
vertical-align: middle;
}

Y el codigo html donde implemento la tabla que usa estilos es:

<table width="100%" height="100%" border="0" class="estilotabla" >

<!-- cabecera de la tabla -->
<tr >
<td class="estilocabecera" width="14%"><p></p></td>
<td class="estilocabecera" width="14%" ><p>Lunes</p></td>
<td class="estilocabecera" width="14%"><p>Martes</p></td>
<td class="estilocabecera" width="14%"><p>Miercoles</p></td>
<td class="estilocabecera" width="14%"><p>Jueves</p></td>
<td class="estilocabecera" width="14%"><p>Viernes</p></td>
<td class="estilocabecera" width="14%"><p>Total Horas Semana</p></td></tr>

<!-- horas de entrada de cada dia de la semana -->
<tr >
<td class="estilocelda" width="14%" ><p>Hora Entrada</p></td>
<td class="estilocelda" width="14%"><p><?php echo $array_ordenado["LUNES"]["Entrada"]["hora"];?></p></td>
<td class="estilocelda" width="14%"><p><?php echo $array_ordenado["MARTES"]["Entrada"]["hora"]; ?></p></td>
<td class="estilocelda" width="14%"><p><?php echo $array_ordenado["MIERCOLES"]["Entrada"]["hora"];?></p></td>
<td class="estilocelda" width="14%"><p><?php echo $array_ordenado["JUEVES"]["Entrada"]["hora"]; ?></p></td>
<td class="estilocelda" width="14%"><p><?php echo $array_ordenado["VIERNES"]["Entrada"]["hora"];?></p></td>
<td class="estilocelda" width="14%"><p>-----<p></td>
</tr>

<!-- horas de salida de cada dia de la semana -->
<tr >
<td class="estilocelda" width="14%"><p>Hora Salida</p></td>
<td class="estilocelda" width="14%"><p><?php echo $array_ordenado["LUNES"]["Salida"]["hora"];?></p></td>
<td class="estilocelda" width="14%"><p><?php echo $array_ordenado["MARTES"]["Salida"]["hora"]; ?></p></td>
<td class="estilocelda" width="14%"><p><?php echo $array_ordenado["MIERCOLES"]["Salida"]["hora"];?></p></td>
<td class="estilocelda" width="14%"><p><?php echo $array_ordenado["JUEVES"]["Salida"]["hora"]; ?></p></td>
<td class="estilocelda" width="14%"><p><?php echo $array_ordenado["VIERNES"]["Salida"]["hora"];?></p></td>
<td class="estilocelda" width="14%"><p>-----<p></td>
</tr>

<!-- horas totales de cada dia de la semana -->
<tr>
<td class="estilocabecera" width="14%"><p>Total Dia</p></td>
<td class="estilocabecera" width="14%"><p><?php echo $horas_lunes; ?></p></td>
<td class="estilocabecera" width="14%"><p><?php echo $horas_martes; ?></p></td>
<td class="estilocabecera" width="14%"><p><?php echo $horas_miercoles; ?></p></td>
<td class="estilocabecera" width="14%"><p><?php echo $horas_jueves; ?></p></td>
<td class="estilocabecera" width="14%"><p><?php echo $horas_viernes; ?></p></td>
<td class="estilocabecera" width="14%" ><font size=+0><p><?php echo $horas_totales ?></p></font></td>
</tr>
</table>

Son 4 filas, la ultima y primera tiene estilo cabecera que solo cambia el fondo y el tipo de letras.

Poniendo el atributo vertical-align=middle a todos los estilos no los centra.

Muchas gracias, espero vuestra solución.