Share
Chris Coyier publicó recientemente un árbol de decisiones en su sitio, CSS Tricks, para demostrar una gran cantidad de formas de centrar las cosas horizontal o verticalmente mediante CSS. Como soluciones independientes, todos tienen sus advertencias, pero combinados son una herramienta de centrado imparable que funciona en todos los navegadores de IE8 y en forma constante.
Así es como lo haces..
Nota: Para cubrir todas las bases he proporcionado la explicación en video y en forma escrita..
Descargue el video o suscríbase a Tuts + Web Design en Youtube
Si está creando un sitio web receptivo, lo más probable es que esté dimensionando sus elementos con porcentajes, así que hagamos un arbitrario .envase elemento:
...
.contenedor ancho: 70%; altura: 70%; margen: 40px auto; fondo: rojo;
Para asegurarnos de que nuestro elemento contenedor se estire adecuadamente, establezcamos html, cuerpo ancho: 100%; altura: 100%; .
Ahora dentro de eso .envase, Vamos a obtener el centrado vertical con el patrón de tabla común. Esto toma elementos de nivel de bloque normales y hace que se comporten como celdas de tabla, lo que nos proporciona un centrado vertical:
...
.exterior display: tabla; ancho: 100%; altura: 100%; .inner display: table-cell; alineación vertical: medio; text-align: center;
Finalmente, vamos a agregar un elemento centrado horizontalmente:
...
.centrado posición: relativo; pantalla: bloque en línea; ancho: 50%; relleno: 1em; fondo: naranja; color blanco;
Dentro de eso, puede colocar cualquier cosa que su corazón desee, incluidos los bloques de texto de altura dinámica o elementos con una posición absoluta.
Demo en GitHub
Para cambiar el centrado horizontal del elemento, simplemente modifique .interiores texto alineado propiedad. Para cambiar el centrado vertical, modificar .interiores alineación vertical propiedad.
Este ejemplo puede parecer una gran cantidad de marcas, pero las piezas de trabajo son solo tres divs: .exterior, .interior, y.centrado. Y el estilo de estos es consistente, por lo que puede usar esto en su plantilla de CSS en todos los proyectos y no volver a preocuparse por eso..
Es un elemento más más grande que la mayoría de las técnicas de centrado y completamente a prueba de balas. Mi esperanza es que esto se convierta en el enfoque estándar y finalmente podamos dejar de preocuparnos por centrarnos en CSS.
Accentsconagua