Foros del Web » Diseño web » HTML »

Centrar datos, tablas, textos,... en la vertical

Estas en el tema de Centrar datos, tablas, textos,... en la vertical en el foro de HTML en Foros del Web. Para centrar en la horizontal se usa <div align="center"></div>, ¿Pero y si yo quiero centrar en la vertical una tabla que me aparezca por pantalla? ...
  #1 (permalink)  
Antiguo 19/07/2005, 05:20
 
Fecha de Ingreso: febrero-2005
Mensajes: 1.017
Antigüedad: 9 años, 6 meses
Puntos: 6
Centrar datos, tablas, textos,... en la vertical

Para centrar en la horizontal se usa <div align="center"></div>, ¿Pero y si yo quiero centrar en la vertical una tabla que me aparezca por pantalla? Puedo poner varios "<br>" antes de ella, pero este método no es "universal" y dependiendo del tamaño del monitor podría cambiar su posición relativa a él.

¿Cómo hacer que los datos salgan centrados en la pantalla (o en un área dentro de ella, si la parte izquierda por ejemplo, la tenemos ocupada)?
  #2 (permalink)  
Antiguo 19/07/2005, 21:39
Avatar de Mickel  
Fecha de Ingreso: mayo-2002
Ubicación: Lima, Peru
Mensajes: 4.620
Antigüedad: 12 años, 3 meses
Puntos: 7
valign=middle
__________________
No tengo firma ahora... :(
  #3 (permalink)  
Antiguo 20/07/2005, 10:21
 
Fecha de Ingreso: febrero-2005
Mensajes: 1.017
Antigüedad: 9 años, 6 meses
Puntos: 6
No me funciona. ¿Dónde se supone que hay que meter el valign?
  #4 (permalink)  
Antiguo 20/07/2005, 21:46
 
Fecha de Ingreso: julio-2005
Mensajes: 46
Antigüedad: 9 años, 1 mes
Puntos: 0
<td valign="middle"> el contenido </td>
  #5 (permalink)  
Antiguo 21/07/2005, 02:37
 
Fecha de Ingreso: febrero-2005
Mensajes: 1.017
Antigüedad: 9 años, 6 meses
Puntos: 6
Eso sería para centrar un td, pero no una tabla entera. ¿Se puede esto?
  #6 (permalink)  
Antiguo 23/07/2005, 08:38
 
Fecha de Ingreso: febrero-2005
Mensajes: 1.017
Antigüedad: 9 años, 6 meses
Puntos: 6
¿No se puede?
  #7 (permalink)  
Antiguo 24/07/2005, 11:44
Avatar de izar  
Fecha de Ingreso: enero-2004
Mensajes: 511
Antigüedad: 10 años, 7 meses
Puntos: 1
tendrias que metes la tabla que quieres centrar dentro de un <td> de una tabla exterior.
  #8 (permalink)  
Antiguo 25/07/2005, 08:17
 
Fecha de Ingreso: febrero-2005
Mensajes: 1.017
Antigüedad: 9 años, 6 meses
Puntos: 6
Jaja, izar, pero el problema no lo has quitado: ¿y cómo centro esa tabla exterior? ¿Metiéndola dentro de un td de otra tabla aún más exterior, que a su vez está dentro de otra, que a su vez está dentro de otra... y así hasta el infinito?
  #9 (permalink)  
Antiguo 25/07/2005, 16:41
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.368
Antigüedad: 11 años, 9 meses
Puntos: 316
Hola todos :

estaba buscando formas de alinear verticalmente un texto dentro de un contenedor y terminé usando una tabla porque los métodos CSS no me funcionaron.

O yo no tuve suerte y encontré los que no funcionan.

Me refiero a que vertical-align no anda en cualquier elemento y por eso algunos usan un segundo contenedor para el texto dentro del primero, y toman la medida a partir de allí para centrarlo, inclusive hasta hay que saber la altura de ese segundo contenedor.

Como lo único que debía meter era un texto de una línea, maldije por tener que reescribir el código para hacer la tabla (era con JS), ¡y después se me ocurrió un truco para conseguir el mismo efecto!.

Se los dejo por si les sirve

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transtional//EN">
<html>
<head>
<style>
body, html {height:100%; margin:0; padding:0; text-align:center; font: bold 60px normal; }
img{height:100%; width:0; vertical-align:middle; // o absmiddle //}
</style>
</head>
<body>
<img src="0.0" /> CENTRADO.
</body>
</html>
Ah!, un_tio, la tabla exterior no hay que centrarla : se la ajusta al 100% del body.

saludos

furoya
  #10 (permalink)  
Antiguo 25/07/2005, 16:53
 
Fecha de Ingreso: febrero-2005
Mensajes: 1.017
Antigüedad: 9 años, 6 meses
Puntos: 6
¡Vaya furoya! Gracias por el truco.

¿Entonces le pones una imagen de fondo, con fuente igual a 0.0? ¿Y eso por qué? ¿0.0 significa ninguna?
Cita:
Iniciado por furoya
Ah!, un_tio, la tabla exterior no hay que centrarla : se la ajusta al 100% del body.
Aah, así sí.

Saludos

PD: lo malo de tu truco es si quieres poner una imagen de fondo: ¿podrás ponerla igual sin ningún problema?
  #11 (permalink)  
Antiguo 26/07/2005, 14:00
 
Fecha de Ingreso: febrero-2005
Mensajes: 1.017
Antigüedad: 9 años, 6 meses
Puntos: 6
Pues no me ha funcionado el "truco" de la imagen, en lugar de centrarme lo que a continuación iba a poner, me lo ha puesto más abajo (que ni se ve y hay que bajar con la barra de scroll para verlo).
A lo mejor donde pone img{height:100%; width:0; vertical-align:middle;} hay que poner donde pone el height el width y donde éste el height.
  #12 (permalink)  
Antiguo 26/07/2005, 15:06
 
Fecha de Ingreso: febrero-2005
Mensajes: 1.017
Antigüedad: 9 años, 6 meses
Puntos: 6
¿Cómo se haría de la forma de la tabla exactamente? He pensado en crearme un modelo de "tabla contenedora" en css, ¿puede alguien ponerme cómo sería si ya lo ha hecho alguna vez? Estoy intentándolo y me da problemas por distintos sitios.
  #13 (permalink)  
Antiguo 26/07/2005, 15:18
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 9 años, 4 meses
Puntos: 0
si se puede centrar con CSS, entra aqui
http://www.tierradenomadas.com/tw003.phtml
lee los dos primero articulos
  #14 (permalink)  
Antiguo 26/07/2005, 15:25
 
Fecha de Ingreso: febrero-2005
Mensajes: 1.017
Antigüedad: 9 años, 6 meses
Puntos: 6
Gracias RoQ. Si es con CSS, aún mejor. Pero por favor, explícame un poco cómo va:

Cojo el primer método (que me ha parecido el más sencillo de todos los que he leído), en el que según él hay que hacer esto:

Cita:
Código HTML:
<div id="CentradaLL">... contenido de la caja... </div>

Código CSS:
div#CentradaLL { position:absolute; top:10%; left:10%; width:80%; height:80%; }
¿Cómo escribo la parte de código CSS en mi hoja de estilos? Porque he probado a meterla tal cual y no me ha funcionado (en mi hoja html, entre los dos divs, había puesto mi tabla, que ha seguido sin centrarse).
  #15 (permalink)  
Antiguo 26/07/2005, 15:38
 
Fecha de Ingreso: febrero-2005
Mensajes: 1.017
Antigüedad: 9 años, 6 meses
Puntos: 6
He conseguido que funcione, poniéndolo en lugar de en la hoja de estilo, entre etiquetas <style> en el propio documento (pero yo quiero que vaya en la hoja de estilos).

Al final he puesto esto:

<style>div#CentradaLL { position:absolute; top:40%; left:40%; width:80%; height:80%; }</style>

Es decir, poniendo el top y el left al 40% me sale centrado (no sé si saldría también centrado en otros ordenadores, espero respuestas); tampoco entiendo por qué no sale centrado con el 50%.
  #16 (permalink)  
Antiguo 26/07/2005, 16:08
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 9 años, 4 meses
Puntos: 0
en la hoja de estilo solo pon
div#CentradaLL { position:absolute; top:40%; left:40%; width:80%; height:80%; }
en tu html an el div pon el <div id="CentradaLL"> cuidado con las mayusculas nomas, deberia funcionar con el 10% porque si lees el codigo la caja tiene un ancho del 80% y un alto del 80%, 10% arriba y 10% a la izquierda, lo cual deja 10% a la derecha y abajo sumados dan 100%, deberia centrarse
  #17 (permalink)  
Antiguo 26/07/2005, 17:10
 
Fecha de Ingreso: febrero-2005
Mensajes: 1.017
Antigüedad: 9 años, 6 meses
Puntos: 6
Pues nada, no, que no me va metiéndolo en la hoja css.

He observado que todo lo que tenía metido hasta ahora en la hoja css seguía otra sintaxis, empezando una palabra tipo td seguida de las llaves y sus cosas, o empezando por un punto si quería crear una clase. ¿Eso del div# se usa poniéndolo así tal cual (y me imagino que es para definir estilos para id's)?
  #18 (permalink)  
Antiguo 31/07/2005, 19:18
 
Fecha de Ingreso: febrero-2005
Mensajes: 1.017
Antigüedad: 9 años, 6 meses
Puntos: 6
Por favor, es importante, necesito saber cómo centrar datos en medio de la pantalla, lo cual exige saber cómo centrar en la vertical: ¿nadie lo sabe?

Lo que me dijo RoQ parece buena idea, pero no me va debido a que no sé cómo meter el div# en la hoja de estilos y que funcione, ¿alguien sabe cómo?
  #19 (permalink)  
Antiguo 01/08/2005, 11:57
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.368
Antigüedad: 11 años, 9 meses
Puntos: 316
Quizá antes de meterte en en la creación de páginas web deberías leer algún tutorial. Así no te quedarías atascado con algo tan elemental.

FAQ CSS 2

Te dejo un ejemplo de cómo propuso hacerlo izar

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<link href="mi_estilo.css" rel="stylesheet" rev="stylesheet" type="text/css">
</HEAD>
<BODY>

<table id="contenedor" height="100%" width="100%" ><tr><td align="center" >

	<table id="contenido"><tr><td>
	QWERTYUIOP
	</td></tr></table>

</td></tr></table>
<br /><br />
RESTO <br />
DEL <br />
DOCUMENTO
</BODY></HTML>
y la hoja de estilo es

mi_estilo.css
Código:
#contenedor td { border:5px solid red; // EL BORDE ESTÀ PARA QUE VEAS HASTA DONDE LLEGA LA TABLA //}

#contenido {font-size:30pt; background-color:silver; //COMO VERÁS EL BORDE SE APLICA TAMBIÉN AL td DE ESTA TABLA //}
El truco de la imagen no te funcionó porque, como ya expliqué, es para una línea solamente. Es más, si usas 2 palabras vas a tener que separarlas con un nbsp para que al redimensionar no se corte el título. Se usa para poner una carátula o portada que siempre se va a ver al comienzo de la página antes del contenido, y se ajusta automaticamente al tamaño de ventana.

El ejemplo CSS que está arriba es uno de los trucos que se usan y que mencioné antes. Como el vertical-align no sirve en cualquier caso, hay que recurrir a ellos hasta que exista un equivalente a valign para todos los elementos.
  #20 (permalink)  
Antiguo 08/01/2006, 18:46
 
Fecha de Ingreso: enero-2006
Mensajes: 3
Antigüedad: 8 años, 7 meses
Puntos: 0
HOla... encontré una forma de centrar contenido verticalmente dentro de un DIV... [en este caso es una imágen]

la sintaxis para el DIV sería algo así xomo ::

*.div { display:inline-table; text-align:center; }

... cabe mencionar que yo definí la altura del div [177px].. creo que especificar el ancho y el alto tiene mucho que ver... ;) los quiero!! ;)
  #21 (permalink)  
Antiguo 09/01/2006, 11:26
Avatar de KarQ  
Fecha de Ingreso: septiembre-2005
Mensajes: 88
Antigüedad: 8 años, 11 meses
Puntos: 1
Primero y principal: usar tablas para maquetar está mal ya que las tablas se deben de usar para hacer tablas y no para maquetar. Si quereis centrar verticalmente probad esto.

1 - metemos todo el contenido dentro de un elemento de bloque ya sea un DIV o un P o lo que nos interese en este momento (tb serviría un table). Yo recomiendo meter lo que se quiera centrar en un DIV, dará menos problemas.

2 - este DIV tiene que tener un height fijo ya que sino el centrado vertical será imposible.

3 - Por último le aplicamos una ID o una CLASS por ejemplo "valign" y le asociamos el siguiente estilo.

Código:
div.valign {
height: 500px; /*esto será según vuestras necesidades*/
width: 100%; /*esto no debería ser necesario*/
position: absolute;
top: 50%;
margin-top: -250px; /*muy importante, aquí usaremos la mitad del height pero en negativo*/
}
Con esto debería funcionar. Lo usé por ejemplo en la web de www.prolesa.es y aunque se redimensione el navegador la capa seguirá centrada. Espero que os sirva. Un saludo!
__________________
KarQ - xC
mi weblog en: http://www.monochromatic.es

Última edición por KarQ; 09/01/2006 a las 11:33
  #22 (permalink)  
Antiguo 15/01/2006, 14:34
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.368
Antigüedad: 11 años, 9 meses
Puntos: 316
Cita:
Iniciado por KarQ
... usar tablas para maquetar está mal ya que las tablas se deben de usar para hacer tablas y no para maquetar ...
En teoría sí, hasta sería preferible; en la práctica sabemos que no siempre las podemos reemplazar. Ye se mencionó ésto más arriba. También el truco que posteaste, y que sirve solamente si tienes la medida del div .

Además convendría haberle explicado a xoticstar el por qué del sermón, ya que no todos saben que al poner inline-table estamos convirtiendo al div en una tabla.
Es para usar en lenguajes que no tienen <table> ; en HTML carece sentido, como no sea para crear algún efecto; que tampoco va a funcionar en todos los navegadores. Así que se sigue prefiriendo <table> .
Supongo que ese atributo siempre obliga a crear dentro del elemento los table-header-group, table-footer-group, table-row, table-cell, ...; aunque peor debería ser poner un table-cell sin un display:table como parent.

saludos
  #23 (permalink)  
Antiguo 19/01/2006, 04:38
 
Fecha de Ingreso: enero-2006
Mensajes: 3
Antigüedad: 8 años, 7 meses
Puntos: 0
haber haber... no veo nada de malo poner inline-table, y según a mi entender no se convierte a tabla, sólo se modifica la forma EN QUE SE MUESTRA el elemento [no se si se herede cosas como el caption, etc]...

el WC3.. perdón, el W3C recomienda no utlizar tablas para maquetar, ya que las mismas son para grupos de datos [o algo así]... repito, al usar inline-table no estamos convirtiendo el div en un table, solo modificamos la forma en que se muestra... siendo así, se respetan los estándares...
  #24 (permalink)  
Antiguo 19/01/2006, 15:24
Avatar de KarQ  
Fecha de Ingreso: septiembre-2005
Mensajes: 88
Antigüedad: 8 años, 11 meses
Puntos: 1
De acuerdo

Efectivamente xoticstar, la propiedad display afecta a la forma en que el elemento se comportará pero no lo convertirá en otra cosa. Por ejemplo, un navegador para invidentes no interpreta igual ni lee en el mismo orden los datos de un <table> que de un <div style="display:table"> por lo que las tablas se deben usar para agrupar datos en forma de tabla (como por ejemplo un formulario) y no para maquetar. Según mi experiencia la mejor forma de centrar verticalmente es la que expliqué con anterioridad y es compatible con todos los navegadores que he probado.
__________________
KarQ - xC
mi weblog en: http://www.monochromatic.es
  #25 (permalink)  
Antiguo 20/01/2006, 03:03
 
Fecha de Ingreso: enero-2006
Mensajes: 3
Antigüedad: 8 años, 7 meses
Puntos: 0
eh viva!! tengo la razón¡¡ ¬¬... je,, gracias por tu aportación ;)...

offtopic :: se siente hypersuperduper cuando todas tus páginas validan en la W3C [html, css, etc]
  #26 (permalink)  
Antiguo 22/01/2006, 13:27
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.368
Antigüedad: 11 años, 9 meses
Puntos: 316
Cita:
Iniciado por xoticstar
...la sintaxis para el DIV sería algo así xomo ::

*.div { display:inline-table; text-align:center; }...
Cita:
Iniciado por KarQ
...Primero y principal: usar tablas para maquetar está mal ya que las tablas se deben de usar para hacer tablas y no para maquetar...
. . .
Cita:
Iniciado por KarQ
...Efectivamente xoticstar, la propiedad display afecta a la forma en que el elemento se comportará pero no lo convertirá en otra cosa...
¿ ?

Bien, igual no tiene importancia.

Cita:
Iniciado por xoticstar
...viva!! tengo la razón¡¡ ...
Sólo si KarQ la tiene. A mi me parece raro, pero nada más que usando la deducción y la lógica elemental, no porque me haya detenido a estudiar el asunto; la verdad es que no me importa mucho si un código respeta o no algún estándar, con que funcione en la mayoría de los navegadores es más que suficiente. Por eso no suelo ocupar mi -lamentablemente escaso- tiempo en conocer las razones para crear atributos, principalmente porque me cansa buscarlos.
Si hay algún enlace a una explicación seria (porque si es por opinar, seguimos opinando nosotros) va a ser bienvenida.

Les cuento el razonamiento que usé para ver a dónde me perdí.

La tabla es un elemento con un layout muy propio (de hecho, en IE se usa mucho para ejecutar filtros, ya que no se necesita asignarle ancho, alto, posición... para darle uno) y eso permite que pueda usarse un
valign o un vertical-align en sus celdas. Otra característica importante es que el elemento "padre" permite igualar la medida de sus "hijos" automaticamente, por eso en una misma fila o columna, las celdas tienen el mismo ancho o alto respectivamente. Pero ésto sería otro tema.

Ahora bien, si el asunto fuera darle ese layout a otro bloque, alcanzaría con un display: layout-table. Pero existen table ; inline-table ; table-row-group ; table-header-group ; table-footer-group ; table-row ; table-column-group ; table-column ; table-cell ; table-caption , cuyo fin evidente es hacer tablas.
Si declaramos HTML o XHTML en el documento, el navegador debería ignorarlos, pero como CSS es para dar formato a varios lenguajes más (como XML que no tiene <table> ), los deja pasar.

Me parece que como hack está muy bien, salvo por el detalle de que no funciona en todos los navegadores, y habría que esperar un tiempo antes de empezar a usarlo.

Ahora, si estos valores sirven realmente paa hacer tablas, la política que se siga será igual que para table ; tr ; td .... Que por otro lado

Cita:
Iniciado por xoticstar
...se siente hypersuperduper cuando todas tus páginas validan en la W3C [html, css, etc]...
no tiene que ver con validar CSS o HTML sino con semántica.
Como mucho, algún validador te hará una recomendación, pero si el código está bien escrito, el documento valida con cualquier contenido ( aún con maquetado a <table> ).

Sí, claro, en teoría. Los valdadores son máquinas y no trabajan mejor que quien las programe. Así como no van a acepta un tr sin un tbody encima, si creamos la tabla con CSS lo más seguro es que no entiendan el formato y lo aprueben solamente por la etiqueta div . Pero también puede haber un validador lo bastante inteligente como para ver la diferencia. No hay por qué prejuzgar.

Y ya que hablamos de formato

Cita:
Iniciado por KarQ
...la propiedad display afecta a la forma en que el elemento se comportará ...
es totalmente cierto porque es una característica del CSS, pero que las tablas se usen para tabular y no para maquetar es una cuestión de concepto, no una exclusividad de la etiqueta <table> . Si la tabla no está "dibujada" en el código no es excusa para ignorarla. En todo caso, será un bug de los validadores de semántica o de

Cita:
Iniciado por KarQ
...un navegador para invidentes...
que suelen ver las etiquetas pero no los estilos aunque estén inline, y en la mayoría de los casos hay que desactivar el modo HTML para leer el documento como texto. Por eso es conveniente crear otra página en vez de usar media aural , braille o embossed . Al menos hasta que los costos bajen lo suficiente como para mejorar la tecnología de esos navegadores. [NOTA :estoy seguro de que este tema ya se trató y yo participé. Si me acuerdo de dónde está, agrego el enlace.]

Por último, para no seguir estirando el mensaje

Cita:
Iniciado por KarQ
...la mejor forma de centrar verticalmente es la que expliqué con anterioridad y es compatible con todos los navegadores que he probado....
Sí, claro, que funciona nadie lo está discutiendo, las objeciones podrían ser :
Que ya fue menconado más arriba.
Que no centra, solamente posiciona.
Que hay que saber la medida del bloque para hacer el cálculo de posicionamiento.
Que tambien hay que usar hacks si tiene bordes, márgenes ...
En resúmen, que no pasa de un truco; pero en los casos en que pueda reemplazar a una tabla al maquetar siempre conviene usarlo.

saludos

furoya

P.D. : xoticstar, ¿lo del "WC³" tiene algún doble sentido?

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 02:15.
SEO by vBSEO 3.3.2