Cómo alinear verticalmente una tabla en CSS -- html campo con css campo con html-table camp Relacionados El problema

How to Vertically Align a Table in CSS


5
vote

problema

Español

¿Cómo puedo alinear verticalmente una tabla en el centro de la pantalla con CSS?

Original en ingles

How can I vertically align a table in the middle of the screen with css?

</div
        
 
 

Lista de respuestas

1
 
vote

En general, algo a lo largo de las líneas de esto funciona bastante bien en cualquier elemento de bloque con una altura definida.

  table {   position: absolute;  top: 50%;  margin-top: -50%; }   

centrado en la página es más difícil ya que no tiene una altura definida, pero creo que esto funciona.

  html {  height: 100%; }   

Puede encontrar algunas diferencias de navegador, actuar en consecuencia.

 

Generally something along the lines of this works pretty well in any block element with a defined height.

table {   position: absolute;  top: 50%;  margin-top: -50%; } 

Centering on the page is harder since you don't have a defined height, but I think this works.

html {  height: 100%; } 

You may encounter some browser differences, act accordingly.

</div
 
 
 
 
1
 
vote

Dicho poco, simplemente haga que su cuerpo sea una mesa, porque la alineación vertical funciona en las células de la tabla:

  body, html {    height: 100%;  }  body {    display: table;  }  #wrapper {    display: table-cell;    vertical-align: middle;   height: 80%; }   

Esto vertical alineará su página a Medio y deje que sea fluido 80%

 

Shortly said, just make your body a table, because vertical-align does work on table-cells:

body, html {    height: 100%;  }  body {    display: table;  }  #wrapper {    display: table-cell;    vertical-align: middle;   height: 80%; } 

This will vertical align your pagewrapper to middle and let it be fluid 80%

</div
 
 
0
 
vote

Si puede darle a la tabla una altura fija, entonces siéntase libre de adaptar el CSS de este sitio i ' acabo de hacer

bit complicado para explicar, pero básicamente estableció un horizonte de 1 píxel al alto 'a un 50% de altura de la pantalla alrededor de su contenido, luego ofrezca la parte superior del elemento para centrarse (es decir, su tabla) en el 50% de su altura.

Editar: Aquí está el artículo Hice originalmente mi solución de, con Explicación y amplificador; todo.

 

If you can give the table a fixed height, then feel free to adapt the CSS from this site I've just done.

Bit complicated to explain, but basically you set a 1 pixel high 'horizon' at 50% height of the screen around your content, then offset the top of the element to be centred (i.e. your table) by 50% of its height.

EDIT: Here's the article I originally made my solution from, with explanation & everything.

</div
 
 

Relacionados problema

0  Cambie la función JavaScript para editar celdas en lugar de agregarlas  ( Change javascript function to edit cells instead of append them ) 
Perdón por la vaguedad de mi pregunta. Déjame empezar desde cero. Actualmente tengo esto: http://jsfiddle.net/kmg4x/1/ < / p> y esta otra pregunta que pu...

7  ¿Cómo ocultar las filas de mesa sin cambiar el tamaño del ancho general?  ( How to hide table rows without resizing overall width ) 
¿Hay alguna manera de ocultar las filas de mesa sin afectar el ancho de la tabla general? Tengo un poco de javascript que muestra / oculta algunas filas de ta...

8  Desapareciendo bordes de células de mesa CSS en navegadores basados ​​en gecko  ( Disappearing css table cell borders in gecko based browsers ) 
Tengo una construcción de tabla HTML muy específica que parece revelar un error de gecko. Aquí hay una versión destilada del problema. Observe la siguiente ...

7  Colspan en IE7 / 8 no respetado  ( Colspan in ie7 8 not respected ) 
El DOM se ve así: <table> <tr> <td>a</td>...<td>g</td> </tr> <tr> <td colspan="3"> <table> ... </table> </td> </tr>...

27  ¿Por qué usar tablas para estructurar tu diseño?  ( Why use tables to structure your layout ) 
Mirando el código fuente para el desbordamiento de la pila, noté que han usado tablas y en línea CSS bastante, también algo que encontré extraño fue el uso de...

14  ¿Es posible usar la pantalla: bloque en TD en el correo electrónico HTML, para lograr un diseño de tabla sensible?  ( Is it possible to use displayblock on td in html email to achieve responsive t ) 
Este fantástico artículo describe cómo crear tablas sensibles que escalan fabulosamente a los navegadores móviles. Ahora estoy tratando de aplicar la misma ...

5  Cómo alinear verticalmente una tabla en CSS  ( How to vertically align a table in css ) 
¿Cómo puedo alinear verticalmente una tabla en el centro de la pantalla con CSS? ...

3  DOCTYPE XHTML1-TRANSICITAL.DTD Ignora la altura de la celda de la tabla  ( Doctype xhtml1 transitional dtd ignores table cell height ) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199...

4  Cuerda continua que no se envuelve en TD  ( Continuous string not getting wrapped in td ) 
Cuando coloco una larga cadena continua en mi ancho fijo TD, no se está envuelto. La cadena aumenta el ancho de mi mesa. ¿Alguien puede ayudarme con esto? P...

147  ¿Cómo puedo dejar que el cuerpo de una mesa se desplaza, pero mantenga su cabeza fija en su lugar?  ( How can i let a tables body scroll but keep its head fixed in place ) 
Estoy escribiendo una página donde necesito una tabla HTML para mantener un tamaño establecido. Necesito los encabezados en la parte superior de la mesa para ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos