Comment aligner le contenu d'un div au fond en CSS

Balises DIV définissent la disposition de pages HTML. Bien que tout type de contenu peut être placé dans les balises DIV, le placement de contenu est géré à l'aide Cascading Style Sheets (CSS). Alignement de la DIV eux-mêmes et l'alignement des balises de contenu dans les balises DIV, deux scénarios sont tout à fait différentes.

Contenu

Instructions
Conseils avertissements

Une seule ligne de texte peut être aligné sur le fond, tout simplement en spécifiant la hauteur de la ligne que le double de la hauteur de la DIV qui le contient moins la hauteur du texte de la ligne réelle. Éléments d'image répondent à la "vertical-align: bottom" ligne de code écrite en CSS.

Instructions

Ouvrez la page HTML et le fichier CSS correspondant dans deux fenêtres différentes d'une base en HTML ou éditeur de texte comme Bloc-notes.
Localisez la DIV dans le code HTML pour lesquels le contenu doit être aligné sur le fond. Attribuez un DIV "id" si l'on est pas déjà attribué.
Enveloppez la balise DIV notamment avec une autre balise DIV parent en HTML et d'attribuer un DIV "id" unique pour elle. Ceci est connu comme une «DIV wrapper» et la DIV existant à l'intérieur deviendrait alors une «DIV de l'enfant".
Localisez le bloc de code pour la "DIV de l'enfant" dans le fichier CSS et changer sa valeur "de position" à "absolue" en insérant / remplacement "position: absolute-" dans le bloc de code.
Créer un bloc de code CSS pour frais dans le «DIV wrapper" et attribuer la valeur «de position» comme «relative» par l'insertion "position: relative-" dans le bloc de code.
Ajouter la CSS Code ligne "bottom: 0-" pour le code-bloc de la "DIV enfant» dans CSS.

Conseils Avertissements

Cette même méthode peut être utilisée pour aligner verticalement le contenu à tout niveau en ajustant la valeur de «bas: 0-" ou en utilisant le "top:" propriété CSS.
Bien que CSS ne fournit pas toujours des solutions simples, définitivement tous les problèmes de mise en page peuvent être abordés avec CSS en utilisant une combinaison de propriétés CSS corrélées.
Alignement Bottom fonctionne bien si les éléments DIV sont faits pour imiter les propriétés d'un tableau HTML en définissant "display: table-" ou "display: table-Cell-" avec le "vertical-align: bottom" propriété CSS. Cela fonctionne dans tous les navigateurs sauf Internet Explorer car Internet Explorer ne reconnaît pas "display: table-".
Alors que la propriété vertical-align de CSS fonctionne bien lorsque le contenu est de type "image", il n'y a aucune ligne de code CSS spécifique à aligner verticalement le texte.

Les navigateurs Internet Explorer ont certains bogues concernant la "position:« propriété de CSS, aussi. Donc pages HTML doivent être soigneusement testés pour la compatibilité cross-browser avant de les faire vivre.
Les erreurs les plus simples, comme manquant un point-virgule en CSS, peut totalement briser la disposition de pages HTML. Enregistrer les modifications et de prévisualiser la page HTML après chaque modification apportée au fichier CSS ou la source HTML, afin d'éviter toute confusion plus tard.

Les sujets:

Réponses populaires

Questions connexes