Tecnología

Inicio

Cómo alinear contenido de un DIV al fondo en CSS

December 13

Cómo alinear contenido de un DIV al fondo en CSS


etiquetas DIV definen el diseño de las páginas HTML. Si bien cualquier tipo de contenido se puede colocar dentro de las etiquetas DIV, la colocación de contenido se gestiona mediante hojas de estilo en cascada (CSS). La alineación de la DIV etiquetas a sí mismos y la alineación del contenido dentro de las etiquetas DIV son dos escenarios completamente diferentes.

Una sola línea de texto puede alinearse con la parte inferior, simplemente especificando la altura de la línea como el doble de la altura de la DIV que lo contiene menos la altura real de la línea de texto. elementos de imagen responden a la "vertical-align: parte inferior;" línea de código escrito en CSS.

Instrucciones

1 Abra la página HTML y el archivo CSS correspondiente en dos diferentes ventanas de un HTML básico o editor de texto, como el Bloc de notas.

2 Busque el DIV en el código HTML para el que se ha de adaptar a la parte inferior del contenido. Asignar un "id" DIV si uno no está ya asignada.

3 Envolver la etiqueta en particular DIV con otra etiqueta DIV padres en HTML y asigne un DIV único "id" para ello. Esto se conoce como un "DIV envoltura" y el DIV existente en el interior se convertiría entonces en un "DIV niño".

4 Busque el bloque de código para el "DIV niño" en el archivo CSS y cambiar su valor "posición" a "absoluta" mediante la inserción / sustitución de "position: absolute;" en el código de bloque.

5 Crear un bloque de código fresca en CSS para la "DIV contenedor" y asignarle el valor "posición" como "relativa" mediante la inserción de "position: relative;" en el bloque de código.

6 Agregue el código CSS-line "de abajo: 0;" al código de bloque de la "DIV niño" en el CSS.

Consejos y advertencias

  • Este mismo método se puede utilizar para alinear verticalmente el contenido en cualquier nivel mediante el ajuste de valor de "parte inferior: 0;" o el uso de la "parte superior:" propiedad de CSS.
  • Aunque CSS no siempre proporciona soluciones sencillas, sin duda todos los problemas de diseño pueden ser abordados con CSS mediante el uso de una combinación de propiedades de CSS correlacionados.
  • alineación inferior funciona bien si se hacen los elementos DIV para imitar las propiedades de una tabla HTML mediante la definición de "display: table;" o "display: table-cell"; junto con el "vertical-align: parte inferior;" Propiedad en el CSS. Esto funciona en todos los navegadores excepto Internet Explorer porque Internet Explorer no reconoce "display: table;".
  • Mientras que la propiedad vertical-align del CSS funciona bien cuando el contenido es de tipo "imagen", no hay una línea de código CSS específica para alinear verticalmente el texto.
  • navegadores de Internet Explorer tienen ciertos errores relativos a la "posición:" la propiedad de CSS, también. Así páginas HTML deben ser probados a fondo durante la compatibilidad entre navegadores antes de hacerlos en vivo.
  • Los errores más simples, como la falta de un punto y coma en la CSS, se pueden romper por completo el diseño de las páginas HTML. Guarde los cambios y previsualizar la página HTML después de cada edición realizada en el fichero CSS o el código HTML, con el fin de evitar confusiones en el futuro.