19/07/2005, 05:20
| |||
| |||
| 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)? |
|
25/07/2005, 08:17
| |||
| |||
| 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?  |
|
25/07/2005, 16:41
| |||
| |||
| 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:
Ah!, un_tio, la tabla exterior no hay que centrarla : se la ajusta al 100% del body.<!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>
saludos furoya |
|
25/07/2005, 16:53
| |||
| |||
| ¡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: Aah, así sí.
Iniciado por furoya Ah!, un_tio, la tabla exterior no hay que centrarla : se la ajusta al 100% del body. Saludos PD: lo malo de tu truco es si quieres poner una imagen de fondo: ¿podrás ponerla igual sin ningún problema? |
|
26/07/2005, 14:00
| |||
| |||
| 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. |
|
26/07/2005, 15:06
| |||
| |||
| ¿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. |
|
26/07/2005, 15:18
| ||||
| ||||
| si se puede centrar con CSS, entra aqui http://www.tierradenomadas.com/tw003.phtml lee los dos primero articulos |
|
26/07/2005, 15:25
| |||
| |||
| 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ó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). 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%; } |
|
26/07/2005, 15:38
| |||
| |||
| 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%. |
|
26/07/2005, 16:08
| ||||
| ||||
| 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 |
|
26/07/2005, 17:10
| |||
| |||
| 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)? |
|
31/07/2005, 19:18
| |||
| |||
| 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? |
|
01/08/2005, 11:57
| |||
| |||
| 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:
y la hoja de estilo es<!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> mi_estilo.css
Código:
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.#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 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. |
|
08/01/2006, 19:46
| |||
| |||
| 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!! ;) |
|
09/01/2006, 12:26
| ||||
| ||||
| 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:
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! 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*/
}
Última edición por KarQ; 09/01/2006 a las 12:33 |
|
15/01/2006, 15:34
| |||
| |||
| Cita: 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 .
Iniciado por KarQ ... usar tablas para maquetar está mal ya que las tablas se deben de usar para hacer tablas y no para maquetar ... 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 |
|
19/01/2006, 05:38
| |||
| |||
| 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... |
|
19/01/2006, 16:24
| ||||
| ||||
 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.  |
|
22/01/2006, 14:27
| |||
| |||
| 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: 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.
Iniciado por xoticstar ...viva!! tengo la razón¡¡ ... 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: no tiene que ver con validar CSS o HTML sino con semántica.
Iniciado por xoticstar ...se siente hypersuperduper cuando todas tus páginas validan en la W3C [html, css, etc]... 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: 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
Iniciado por KarQ ...la propiedad display afecta a la forma en que el elemento se comportará ... Cita: 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.]
Iniciado por KarQ ...un navegador para invidentes... Por último, para no seguir estirando el mensaje Cita: Sí, claro, que funciona nadie lo está discutiendo, las objeciones podrían ser :
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. ...Que ya fue menconado más arriba.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? |
?