Cómo hacer un DIV Float Center

Escrito por daag alemayehu | Traducido por daniel gómez villegas
  • Comparte
  • Twittea
  • Comparte
  • E-mail

Usar la propiedad float de CSS añade una cantidad considerable de flexibilidad para el diseño web. El diseño basado en DIV CSS se ha convertido en el estándar de la industria, sin embargo, el aumento de diseño de CSS también ha frustrado a muchos diseñadores web. Bajo los viejos métodos de diseño basados ​​en tablas, el centrado de DIV es simple, sin embargo, la misma tarea presenta problemas en un esquema de diseño CSS. Una de las maneras más fáciles de realizar esta tarea es a través del uso de la propiedad float. Sin embargo, dado que los únicos valores válidos para la propiedad float son izquierda y derecha, centrar un DIV float requiere un cierto nivel de creatividad.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Crea la hoja de estilo que será utilizada para la página en cuestión.

  2. 2

    Define un tipo de clase nueva para los DIVs que serán flotados hacia el centro. Proporciona las propiedades float y width a estas clases.

  3. 3

    Establece el valor de la propiedad float a "izquierda" y el valor de la propiedad de ancho a todo lo ancho necesario para satisfacer tus necesidades particulares. Toma en cuenta que debes establecer el valor de la propiedad width como un porcentaje de la anchura total del elemento que contiene, más que como un valor absoluto.

  4. 4

    Define un tipo de segunda clase. Los DIVs que utilizan esta clase siempre se mostrarán a la izquierda de la página y empujará la primera clase de DIV al centro de la página. Proporciona a esta clase las propiedades float, width y height.

  5. 5

    Establece el valor de la propiedad float como "izquierda" y el valor de la propiedad height en algo pequeño como "1px" o "1%". Calcula el valor de la propiedad width restando el valor de la propiedad width del tipo de tu primera clase del 100 por ciento y divide entre dos. Por ejemplo, si el valor de la propiedad width de tu tipo de primera clase es 30 por ciento, el valor de la propiedad width de esta clase sería 100 por ciento - 30 por ciento = 70 por ciento / 2 = 35 por ciento.

  6. 6

    Guarda tu hoja de estilo como un archivo de texto y dale una extensión ".css".

  7. 7

    Envía tu hoja de estilo al servidor que hospeda tu página web.

  8. 8

    Enlaza tu hoja de estilo a tu página web. Esto se logra mediante la adición de una etiqueta de enlace a la sección HEAD de tu página. La etiqueta LINK quedaría así: <link rel=”stylesheet” href=”your_style_sheet.css” type=”text/css” /> (donde tu hoja de estilo sea nombrada “your_style_sheet.css”). Si has puesto tu hoja de estilo en un directorio distinto que el de tu página web, debes designar la ubicación exacta en la propiedad HREF de la etiqueta LINK.

  9. 9

    Inserta un DIV en tu página web que utilice el tipo definido de segunda clase en la hoja de estilos. Inmediatamente después de eso, inserta un DIV que utilice el tipo definido de primera clase en tu hoja de estilo. Este DIV será float en el centro.

Consejos y advertencias

  • Una opción alternativa para la creación de una hoja de estilo es poner una declaración de estilo en la sección HEAD de tu página web. Una declaración de estilo comienza con una etiqueta y termina con una etiqueta . Coloca el código CSS necesario entre estas dos etiquetas y elimina la etiqueta LINK has insertado en la sección HEAD de tu página web.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles