Centrar un documento con un diseño de ancho fijo usando CSS

Los diseños de ancho fijo pueden ser difíciles de centrar con algunos de los navegadores más populares, pero es posible, con solo unas pocas líneas de código. Así es cómo

Los diseños de ancho fijo pueden ser difíciles de centrar con algunos de los navegadores más populares, pero es posible, con solo unas pocas líneas de código.

Así es cómo

  1. Cree una nueva página web con una hoja de estilo CSS en su editor HTML.
  2. Cree un elemento div como elemento principal en la página donde almacenará todo en la página.
  3. Dele a ese elemento div una ID que sea única en la página.
  4. Abra su hoja de estilo CSS y establezca el ancho de su elemento div:
     div # main {width: 750px; } 
  5. Agregue márgenes automáticos para centrar su div:

     div # main {width: 750px; margen izquierdo: auto; margen derecho: auto} 
  6. Para arreglarlo para Netscape 4 e IE 4 – 6 (modo peculiaridades) agregue una alineación de texto en el cuerpo:

     body {text-align: center; } 
  7. Pero entonces todo el texto dentro está centrado, así que realinee el texto en su #main div agregando text-align: left; allí:

     div # main {ancho: 750px; margen izquierdo: auto; margen derecho: auto; alinear texto: izquierda; } 
  8. Guarda tu página y tu hoja de estilo.
  9. Pon a prueba tu trabajo en varios navegadores web.

Esto centrará el cuadro de diseño pero no el contenido dentro de él. Use text-align para centrar el contenido interno.

Rate article
labsfabs.com
Add a comment