Sobre el problema de que CSS controle el centrado horizontal DIV

Autor：Eve Cole Fecha de actualización：2009-05-31 01:02:34

Con respecto a la cuestión de que CSS controle el centrado horizontal de los DIV, veo que muchos recién llegados están confundidos. Recuerdo que la primera vez que leí CSS fue un libro escrito por un extranjero y hablaba sobre el uso del centrado.

margen izquierdo: automático;
margen derecho: automático;

De hecho, equivale a:

margen:0 automático;

Entonces puedes usar este método, pero algunas personas descubrieron que no estaba centrado cuando usaban IE. Se recomienda que verifique si le falta una declaración DTD.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transicional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

¡Muchas personas han cometido errores similares! También se puede decir que este método ha sido probado, pero todavía no funciona en algunos casos. Entonces hay un segundo método.

margen izquierdo: 50%;
izquierda: -ancho/2;

El ancho aquí no es el Ancho en CSS, sino el ancho de tu DIV. Por ejemplo, si tu div tiene 768px de ancho, entonces debes configurar left:-384px. Muy bien, ya existen dos métodos, que se puede decir que han solucionado los problemas que puedas encontrar.

A veces encontrarás que estos dos no son suficientes. No es compatible con algunos navegadores. Entonces encontré un tercer método, que considera principalmente IE y se basa en el primer método. Requiere cuerpo de fijación.

cuerpo {text-align: center;}

De esta manera, también está centrado en IE, pero trae un nuevo problema: encuentra que todo el texto de su página está centrado, lo cual no es atractivo. Esto es fácil de resolver, simplemente agregue text-align: left y otras configuraciones de ajuste a su definición DIV.

El texto anterior es sólo una referencia y un boceto después de la cena. ¡Todos pueden prestarle atención en el trabajo real!