El diseño de página en los estándares web se implementa mediante Div y CSS. El más utilizado es el efecto de centrar horizontalmente toda la página. Este es el conocimiento básico en el diseño de páginas y el conocimiento que se debe dominar primero. Sin embargo, la gente todavía hace esta pregunta con frecuencia. Aquí resumiré brevemente el método de usar Div y CSS para lograr el centrado horizontal de la página:
1. margin:auto 0 y text-aligh:center
se usan en navegadores modernos (como Internet). Explorer 7, Firefox, Opera, etc.) El método para lograr el centrado horizontal en los navegadores modernos es muy simple, simplemente configure los márgenes izquierdo y derecho en automático. Significado:
#wrap {margen:0 auto;}
El código anterior significa que la distancia entre el div envolvente y los lados izquierdo y derecho se establece automáticamente, siendo los valores superior e inferior 0 (puede ser cualquiera). Ejecute el código actual en un navegador moderno (como Internet Explorer 7, Firefox, Opera, etc.):
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
div#envoltura {
ancho: 760 px;
margen:0 automático;
borde: 1px sólido #333;
color de fondo:#ccc;
}
Para establecer el centrado horizontal de los elementos de la página en navegadores modernos como Firefox, simplemente especifique margin:0 auto;
div#envoltura {
ancho: 760 px;
margen:0 auto; /*0 aquí puede ser cualquier valor*/
borde: 1px sólido #ccc;
color de fondo:#999;
}
Lo anterior funciona muy bien. Pero esto no funciona en Internet Explorer 6 y posteriores, pero afortunadamente tiene su propia solución. En Internet Explorer, el atributo de alineación de texto es heredable, es decir, después de configurarlo en el elemento principal, tendrá este atributo en el elemento secundario de forma predeterminada. Por lo tanto, podemos configurar el valor del atributo de alineación de texto en la etiqueta del cuerpo en el centro, de modo que todos los elementos de la página se centren automáticamente. Al mismo tiempo, también necesitamos agregar un gancho para cambiar el texto de la página. la forma en que estamos acostumbrados a leer: alineado a la izquierda. Entonces tenemos que escribir el código así:
cuerpo {text-align:center;}
#wrap {text-align:izquierda;}
De esta manera, podemos lograr fácilmente la alineación central de Div en Internet Explorer. Por lo tanto, para mostrar el efecto de centrado en todos los navegadores, podemos escribir nuestro código así:
cuerpo { texto-align:centro }
#wrap { text-align:izquierda;
margen:0 automático;
}
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
cuerpo { texto-align:centro }
div#envoltura {
alineación de texto: izquierda;
ancho: 760 px;
margen:0 automático;
borde: 1px sólido #333;
color de fondo:#ccc;
}
Para establecer el centrado horizontal de los elementos de la página en navegadores modernos como Firefox, simplemente especifique margin:0 auto;
div#envoltura {
ancho: 760 px;
margen:0 auto; /*0 aquí puede ser cualquier valor*/
borde: 1px sólido #ccc;
color de fondo:#999;
}
En Internet Explorer 6 y versiones anteriores, también debemos realizar las siguientes configuraciones:
cuerpo { texto-align:centro }
div#envoltura {
alineación de texto: izquierda;
}
Pero aquí hay una premisa, es decir, el elemento centrado debe tener un ancho fijo. Por ejemplo, aquí lo configuramos en 760 píxeles.
2. Posicionamiento relativo y márgenes negativos
Realice un posicionamiento relativo para el ajuste y luego use márgenes negativos para compensar el desplazamiento. Este método es relativamente simple y fácil de implementar:
#wrap {
posición: relativa;
ancho: 760 px;
izquierda: 50%;
margen izquierdo: -380px
}
El significado de este código es establecer la posición de envoltura en relación con la etiqueta del cuerpo de su elemento principal y luego mover su borde izquierdo al centro de la página (es decir, el significado de izquierda: 50%, finalmente); muévalo desde la posición media hacia la izquierda. Complácelo hacia atrás la mitad de la distancia para que quede centrado horizontalmente.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
div#envoltura {
posición: relativa;
ancho: 760 px;
izquierda: 50%;
margen izquierdo: -380px;
borde: 1px sólido #333;
color de fondo:#ccc;
}
Método que funciona en todos los navegadores:
div#envoltura {
posición: relativa;
ancho: 760 px;
izquierda: 50%;
margen izquierdo: -380px;
borde: 1px sólido #333;
color de fondo:#ccc;
}
De manera similar, debe establecer un ancho fijo antes de establecer el centrado horizontal.
¿Qué método elegir?
¿Cuál de los dos métodos anteriores es mejor? El primer método parece utilizar tecnología Hack, pero en realidad no es así. Es un método de escritura estándar web bastante satisfactorio y cumple totalmente con las especificaciones. Por lo tanto, puede elegir cualquiera de los dos métodos para su uso. es un problema de pirateo de CSS.
3. Otros métodos de centrado Los
mencionados anteriormente son todas implementaciones de centrado horizontal cuando se establece un ancho específico. A veces queremos hacer un diseño flexible, o cuando un elemento está en un contenedor solo queremos que esté centrado y no queremos establecer un ancho específico. De hecho, este no es un diseño verdaderamente centrado. Para un elemento con 100% de longitud, ¿diría que está centrado o alineado a la izquierda? Entonces, todo centrado sin altura y ancho no es un verdadero centrado. Configuramos este diseño usando el relleno del elemento. De hecho, cambiamos el tamaño del contenedor del elemento padre:
Si queremos que la longitud del elemento envolvente cambie con la ventana manteniendo el centro, podemos escribir así:
cuerpo {
relleno: 10px 150px;
}
Aquí, solo necesitamos mantener igual el relleno en los lados izquierdo y derecho del elemento padre.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
cuerpo {
relleno: 10px 150px;
}
div#envoltura {
borde: 1px sólido #333;
color de fondo:#ccc;
}
Un diseño flexible y centrado que cambia según el tamaño de la ventana del navegador:
cuerpo {
relleno: 10px 150px;
}
Aquí, solo necesitamos mantener igual el relleno en los lados izquierdo y derecho del elemento padre.
Por supuesto, esto sólo "parece estar centrado", pero suele ser muy útil.