Cómo hacer un centro de DIV flotador

El uso de la propiedad CSS float añade una cantidad significativa de flexibilidad de diseño de sitios web. diseño basado en CSS-DIV ha convertido en el estándar de la industria, pero el aumento de diseño CSS también ha frustrado a muchos diseñadores de páginas web. Bajo los viejos métodos de diseño basados ​​en tablas, DIV centrado era simple, pero la misma tarea presenta problemas bajo un esquema de diseño CSS. Una de las maneras más fáciles de realizar esta tarea es mediante el uso de la propiedad float. Sin embargo, ya que los únicos valores válidos para la propiedad float están a izquierda y derecha, haciendo un flotador DIV al centro requiere un nivel de creatividad.

Instrucciones

1 Crear una hoja de estilo que se utilizará para la página en cuestión.

2 Definir un nuevo tipo de clase de los DIVs que se flotaron hacia el centro. Dar a este flotador clase y propiedades de ancho.

3 Establecer el valor de la propiedad float de "izquierda" y el valor de la propiedad de ancho a lo ancho que necesita para satisfacer sus necesidades particulares. Tenga en cuenta que debe establecer el valor de la propiedad anchura como un porcentaje de la anchura total del elemento que contiene más que como un valor absoluto.

4 Definir un tipo de segunda clase. Los DIVs que utilizan esta clase siempre van a mostrar en el extremo izquierdo de la página y empujarán la primera clase de DIVs al centro de la página. Dar a esta clase de flotador, anchura y propiedades de altura.

5 Establecer el valor de la propiedad float de "izquierda" y el valor de la propiedad de altura a algo pequeño, como "1px" o "1%". Calcular el valor de la propiedad ancho restando el valor de la propiedad ancho de su tipo de primera clase a partir de 100 por ciento y dividiendo por dos. Por ejemplo, si el valor de la propiedad anchura de su tipo de primera clase es 30 por ciento, el valor de la propiedad de ancho para esta clase sería 100 por ciento - 30 por ciento = 70 por ciento / 2 = 35 por ciento.

6 Guarde su hoja de estilo como un archivo de texto plano y darle una extensión ".css".

7 Cargar su hoja de estilo para el servidor que aloja su página web.

8 Vincular la hoja de estilo a su página web. Esto se logra mediante la adición de una etiqueta de enlace a la sección HEAD de su página. La etiqueta LINK debe decir lo siguiente: <link rel = "stylesheet" href = "your_style_sheet.css" type = "text / css" /> (donde la hoja de estilo se denomina "your_style_sheet.css"). Si ha colocado su hoja de estilo en un directorio distinto del de su página web es, debe designar la ubicación exacta de la propiedad HREF de la etiqueta LINK.

9 Inserte un DIV en su página web que utiliza el tipo de segunda clase definida en la hoja de estilo. Inmediatamente después de eso, inserte un DIV que utiliza el tipo de primera clase definida en la hoja de estilo. Este DIV se flotó hacia el centro.

Consejos y advertencias

• Una opción alternativa a la creación de una hoja de estilo es poner una declaración de estilo en la sección HEAD de su página web. Una declaración de estilo comienza con una etiqueta <style> y termina con una etiqueta </ ​​style>. Coloque el código CSS necesario entre estas dos etiquetas y retire la etiqueta LINK ha insertado en la sección HEAD de su página web.