vertical - Trucos de centrado de CSS
style position center (9)
Mi ecuación favorita para centrar un elemento xhtml usando solo CSS es la siguiente:
display: block;
position: absolute;
width: _insert width here_;
left: 50%;
margin-left: _insert width divided by two & multiplied by negative one here_
También existe el margen más simple: método automático en los navegadores que lo admiten. ¿Alguien más tiene formas complicadas de obligar al contenido a mostrarse centrado en su contenedor? (puntos de bonificación por centrado vertical)
editar - Vaya, se olvidó de la parte "negativa" de uno en el margen izquierdo. fijo.
Bueno, eso parece una exageración masiva, tengo que decir. Tiendo a configurar el contenedor para text-align:center; para navegadores antiguos, margin:auto; para navegadores modernos, y déjalo así. A continuación, restablezca text-align en el elemento (si contiene texto).
Por supuesto, algunas cosas necesitan configuración como bloqueo, y los anchos necesitan configuración ... ¿Pero qué diablos estás tratando de diseñar que necesita tanto pirateo?
<div style="text-align:center">
<div style="width:30px; margin:auto; text-align:left">
<!-- this div is sitting in the middle of the other -->
</div>
</div>
El posicionamiento absoluto con un enfoque del 50% tiene el efecto secundario grave de que si la ventana del navegador es más estrecha que el elemento, entonces parte del contenido aparecerá en el lado izquierdo del navegador, sin posibilidad de desplazarse hacia él.
Atenerse a los márgenes automáticos: son mucho más confiables.
Si está trabajando en el modo Estándares (que debería ser), entonces son compatibles con todos los navegadores que probablemente le importen.
Puede usar el truco text-align si realmente necesita soportar Internet Explorer 5.5 y versiones anteriores.
Este es un marcador útil para trucos de CSS
Margen: funciona automáticamente en todos los navegadores siempre que se asegure de que IE esté en modo estándar.
Es más exigente que otros y requiere que su doctype sea el primero en su documento, lo que significa que no tiene espacios en blanco (espacio, pestañas o avances de línea).
Si haces eso, margin: auto es el camino a seguir. :)
Prueba esto; no sé si funciona en IE, funciona bien en Fx sin embargo. Centra un bloque DIV en la página usando solo CSS (sin JavaScript), sin márgenes automáticos y el texto dentro del bloque DIV sigue alineado a la izquierda. Solo estoy tratando de averiguar si el centrado vertical podría funcionar de esa manera, pero hasta ahora sin éxito.
<html>
<head>
<title>Center Example</title>
<style>
.center {
clear:both;
width:100%;
overflow:hidden;
position:relative;
}
.center .helper {
float:left;
position:relative;
left:50%;
}
.center .helper .content {
float:left;
position:relative;
right:50%;
border:thin solid red;
}
</style>
</head>
<body>
<div class="center">
<div class="helper">
<div class="content">Centered on the page<br>and left aligned!</div>
</div>
</div>
</body>
</html>
Quédate con Margin: 0 auto; para la alineación horizontal; Si necesita alineación vertical también use la posición: absoluta; arriba: 50%; margin-top: - (ancho / 2) px; Tenga en cuenta, sin embargo, que si su contenedor tiene más ancho que su pantalla, una parte del mismo caerá fuera de la pantalla en el lado izquierdo usando el método de posición: absoluto.
solo una nota que el margen: auto; El método solo funciona si el navegador puede calcular el ancho del elemento que se va a centrar y el ancho del contenedor principal. en muchos casos, configuración de ancho: automático; funciona, pero en algunos no.
body {
text-align: center;
}
#container {
width: 770px;
margin: 0 auto;
text-align: left;
}
Esto funciona muy bien en todos los navegadores habituales. Como ya se mencionó margin: 0 auto; no funcionará en todas las versiones semi-actuales de IE.
div #centered{
margin: 0 auto;
}
parece ser el más confiable de mi experiencia.