Foros del Web » Creando para Internet » CSS »

Problema centrado verticalemente celda??

Estas en el tema de Problema centrado verticalemente celda?? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/10/2008, 08:52
 
Fecha de Ingreso: junio-2008
Mensajes: 56
Antigüedad: 9 años, 6 meses
Puntos: 1
Problema centrado verticalemente celda??

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?
  #2 (permalink)  
Antiguo 27/10/2008, 09:52
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: Problema centrado verticalemente celda??

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

  #3 (permalink)  
Antiguo 27/10/2008, 10:18
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema centrado verticalemente celda??

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 27/10/2008, 11:42
 
Fecha de Ingreso: junio-2008
Mensajes: 56
Antigüedad: 9 años, 6 meses
Puntos: 1
Respuesta: Problema centrado verticalemente celda??

El estilo css que tengo implementado es:

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

Cita:
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:

Cita:
<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.
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 21:16.