tengo estas bloque de código:Como centro de una mesa de la pantalla (vertical y horizontal)
<table border="1px">
<tr>
<td>
my content
</td>
</tr>
</table>
me gustaría mostrar mi mesa en el centro de la pantalla (vertical y horizontal).
¿cómo puedo hacer eso?
esto fija el punto muerto cuadro en la pantalla:
HTML
<table class="box" border="1px">
<tr>
<td>
my content
</td>
</tr>
</table>
CSS
.box {
width:300px;
height:300px;
background-color:#d9d9d9;
position:fixed;
margin-left:-150px; /* half of width */
margin-top:-150px; /* half of height */
top:50%;
left:50%;
}
Ver Resultados
creo que esto debería hacer el truco:
<table border="1px" align="center">
De acuerdo con esta http://w3schools.com/tags/tag_table.asp está en desuso, pero lo intenta. Si no funciona, elija estilos, como se menciona en el sitio.
http://w3fools.com/ – Pheonix
El centrado horizontal es fácil. Sólo tiene que ajustar ambas márgenes en "auto":
table {
margin-left: auto;
margin-right: auto;
}
vertical de centrado por lo general se logra mediante el establecimiento de los padres tipo de visualización elemento a table-cell y el uso de vertical-align propiedad. Asumiendo que tiene un <div class="wrapper"> alrededor de su mesa:
.wrapper {
display: table-cell;
vertical-align: middle;
}
información más detallada puede encontrarse en http://www.w3.org/Style/Examples/007/center
Si necesita soporte para las versiones anteriores de Internet Explorer (no sé lo que funciona en la versión de esta extraña y rara vez se utiliza el navegador ;-)) entonces es posible que desee search the web para más información, como: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html (sólo un primer golpe, que parece mencionar IE)
La parte izquierda/derecha centrado trabajado, pero sus instrucciones centrarse verticalmente parece negar todo. Aquí está el código que dio y los resultados, todo termina en la esquina superior izquierda de la pantalla. ¿Lo llené mal? http://jsfiddle.net/wJ7dY/161/ – Bukov
El contenedor debe ser más grande que lo que contiene; o) Ver http://jsfiddle.net/uLQZU/ –
This guy teníamos la varita mágica que estábamos buscando, muchachos.
Para citar su respuesta:
sólo tiene que añadir "position: fixed" y que se mantendrá en la vista, incluso si se desplaza hacia abajo. verlo en http://jsfiddle.net/XEUbc/1/
#mydiv {
position:fixed;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
He estado usando este pequeño truco desde hace un tiempo. Puede disfrutarlo.nido de la tabla que desea centrar en otra tabla:
<table height=100% width=100%>
<td align=center valign=center>
(añada su mesa aquí)
</td>
</table>
el align y valign puso la mesa exactamente en el centro de la pantalla, no importa qué otra cosa está pasando.
Esto solo funciona si elimina el! DOCTYPE de lo siguiente: Por supuesto, eso es si usa un editor que lo agrega de manera predeterminada. Me volvieron loco una vez intentando este "truco" y no pude entender por qué no estaba funcionando. – IamBatman
He intentado anteriormente alinear el atributo en HTML5. No es compatible. También probé flex-align y vertival-align con los atributos de estilo. Todavía no puede colocar TABLE en el centro de la pantalla. El siguiente estilo coloca la tabla en el centro horizontalmente.
style = "margin: auto;"
Para la alineación horizontal (No CSS)
Sólo tiene que insertar un atributo align dentro de la etiqueta de la tabla
<table align="center"></table
Solo unas pocas notas: la 'posición: absolute' por lo general será mejor que 'fixed', es posible que necesite establecer' position: relative' para el elemento primario, y habrá problemas cuando las dimensiones de la tabla no se conocerán. Pero si puede establecer las dimensiones, entonces este método está bien. – Arsen7
Los elementos fijos de posición son relativos a la ventana mientras que los elementos de posición absoluta son relativos al elemento principal (que también puede ser la ventana, si se coloca fuera del div principal), es mucho más fácil posicionar algo relativo a la ventana que a en el caso de los formularios de inicio de sesión o las ventanas emergentes, así que fui con eso. –
Tienes razón. Corregido, de hecho, será mejor para las ventanas de inicio de sesión. – Arsen7