Los diseños de sitios web para empresas y otras organizaciones a menudo incorporan elementos de marketing y marca bien definidos. Si su sitio web tiene una página web que le gustaría centrar, puede hacerlo usted mismo usando una combinación de código HTML y CSS (hoja de estilo en cascada). Muchos desarrolladores utilizan las propiedades de desplazamiento para los elementos de la página web para dictar las propiedades de centrado, pero esto no siempre es confiable. Para definir un diseño de sitio web centrado y una página que aparecerá sin barras de desplazamiento, se requieren algunas declaraciones de CSS.

1.

Crea tu página HTML. Si tiene una página con la que ya está trabajando, ábrala. De lo contrario, cree un nuevo archivo en un editor de texto y guárdelo con la extensión ".html". Usa el siguiente esquema:

Observe que la página tiene una sección para el código CSS en la cabecera y un elemento en el cuerpo. El contenido de la página se debe colocar dentro de este elemento. Si está trabajando con una página existente, localice el código CSS correspondiente, que puede estar almacenado en un archivo CSS separado vinculado desde el encabezado de su página.

2.

Identificar el contenedor de la página en CSS. Para diseñar el elemento que contiene, primero debe identificarlo en el código CSS. En la sección de estilo en el encabezado de tu página, o en un archivo separado, si es con lo que estás trabajando, agrega el siguiente selector y esquema:

envase {

}

Esto identifica el elemento con "contenedor" como su atributo de ID. Las declaraciones de estilo para el elemento aparecerán entre los corchetes de apertura y cierre. Alternativamente, puede identificar el elemento utilizando un valor de atributo de clase de la siguiente manera:

.envase {

}

Esto identificaría el siguiente elemento:

3.

Aplica un ancho fijo al elemento para centrar su contenido. Para centrar los elementos en su página, el elemento que contiene debe tener un ancho fijo. Agregue uno entre los corchetes CSS para el elemento "contenedor" de la siguiente manera:

ancho: 800px;

Alterar el valor de altura para adaptarse a su diseño. Ahora puede aplicar una propiedad de margen, lo que obligará al elemento a centrarse dentro de la página:

margen: auto;

4.

Evita que el elemento se desplace. Si no desea que la página se desplace, debe aplicar una propiedad de altura al elemento contenedor de la siguiente manera:

altura: 90%;

Alterar el valor para adaptarse a su diseño. Si los elementos dentro del contenedor ocupan más espacio que este y desea evitar el desplazamiento, debe ocultar el desbordamiento de elementos de la siguiente manera:

desbordamiento: oculto;

Esto evitará que la barra de desplazamiento aparezca incluso si el contenido de su página ocupa más que la altura asignada en el navegador del usuario.

5.

Guarda y visualiza tu página. Ábralo en un navegador o cárguelo en su sitio para ver el resultado. Es posible que necesite realizar ajustes para llegar al diseño que desea. Asegúrese de probar la página una vez que haya completado el contenido, ya que su aspecto puede variar significativamente.

Propina

• Los diferentes navegadores web implementan las reglas CSS de diferentes maneras, así que asegúrese de probar sus páginas en más de una.

Advertencia

• Ocultar el desbordamiento de un elemento de página web puede impedir que algunos de sus usuarios vean todo el contenido de su página.