La disposition du contenu apparaissant sur un site Web est très importante lorsqu'il s'agit de rendre votre site Web avec délicatement agréable et améliorer son expérience utilisateur. Le contenu peut être un élément HTML (en ligne ou au niveau du bloc), du texte, une image, etc. Il existe différentes approches disponibles dans CSS pour aligner ces types de contenu sur votre page Web. Dans cet article, nous allons discuter de certaines de ces approches pour rendre le concept d'alignement du contenu clair pour vous.

Commençons

Aligner les éléments au niveau du bloc

Il y a une énorme quantité d'éléments qui relèvent de la catégorie d'éléments au niveau du bloc tels que

,

pour

, , etc. Vous pouvez aligner ces éléments de différentes manières. Nous en avons discuté ici pour vous.

Comment centrer le texte d'aligner dans CSS

Vous pouvez aligner le texte en utilisant le CSS alignement de texte propriété. Cette propriété rend différentes valeurs telles que gauche, droite, centre et justifier.

Exemple

Supposons que vous souhaitiez aligner un texte présent dans un conteneur div vers la droite. Suivez le code ci-dessous.

Html

Ce texte est correctement aligné.

Nous avons placé un

élément à l'intérieur d'un élément et attribué une classe «à droite» à l'élément.

CSS

.droite
Texte-aligne: à droite;
Border: 3px Purple solide;

En utilisant la propriété Text-Align, nous alignons le texte sur le côté droit du conteneur Div.

Sortir

Le texte a été aligné sur le droit à l'aide de la propriété Text-Align.

Aligner les éléments en ligne

Il y a un tel moment où nous devons aligner des éléments en ligne tels que des images. Vous pouvez aligner ces types d'éléments en modifiant leur type d'élément au niveau de blocage à l'aide de la propriété d'affichage de CSS, puis de l'aligner diverses propriétés CSS en fonction du besoin.

Aligner une image

En utilisant diverses propriétés CSS telles que afficher, marge-gauche, ou marge à droite, vous pouvez aligner une image dans le style que vous aimez.

Exemple

Supposons que vous souhaitiez centrer une image horizontalement en dehors de savoir s'il se trouve dans un conteneur ou non.

Html

Ici, nous avons inséré une image en utilisant la balise.

CSS

img
bloc de visualisation;
marge-gauche: auto;
marge droite: auto;
Largeur: 50%;

Afin d'aligner une image horizontalement, définissez son affichage sur bloquer, et les deux marges (à gauche et à droite) sur Auto. De plus, vous pouvez fournir une largeur ou une hauteur de votre choix.

Sortir

L'image a été alignée avec le centre avec succès.

Alignement horizontal

Explorons différentes approches qui peuvent être utilisées pour aligner les éléments au niveau des blocs horizontalement.

Comment centrer un élément d'aligner un élément

Supposons que vous ayez un et que vous voulez qu'il ne prenne qu'une quantité spécifiée d'espace au lieu de prendre tout l'espace horizontal et de l'aligner au centre de la page. Voici comment tu fais.

Html

Aligner le contenu dans CSS

Ici, nous avons créé un élément et imbriqué un

élément dedans.

CSS

.centre
rembourrage: 5px;
marge: auto;
Largeur: 70%;
Border: 3px Purple solide;

Maintenant, pour que l'élément div prenne l'espace spécifié uniquement pour qu'il ne s'étende pas aux coins de son conteneur lui donne une certaine largeur. Pour centrer l'aligner horizontalement, définissez la marge sur Auto.

Sortir

Le div a été aligné avec le centre avec succès.

Comment aligner les éléments en utilisant la propriété de position

Dans cet exemple, nous allons aligner un conteneur div à droite en utilisant la valeur absolue de la propriété de position.

Html

Alignement des éléments à l'aide de la propriété de position CSS

Cette div est alignée vers le droit en utilisant la valeur aboslute de la propriété de position CSS.

Ici, nous avons créé deux conteneurs Div pour comprendre le fonctionnement de la valeur absolue de la propriété de position. La classe «div» est affectée à la première balise div et la classe «vert» est affectée à la deuxième balise div.

CSS

.div
rembourrage: 15px;
Border: 3px noir solide;

.vert
Position: absolue;
à droite: 1%;
TOP: 15%;
Largeur: 300px;
Border: Green massif 3px;
rembourrage: 10px;

Les deux conteneurs div ont été fournis, cependant, la propriété de position de Second Div a été définie sur Absolute. Maintenant le deuxième div sera aligné par rapport à la position du premier div.

Sortir

La div «verte» a été absolument positionnée par rapport au premier div en utilisant la propriété de position CSS.

Comment aligner les éléments en utilisant la propriété Float.

Supposons que vous souhaitiez faire flotter un conteneur Div sur le côté droit de la page.

Html

Bonjour le monde!

Dans le code ci-dessus, nous avons créé un conteneur div et imbriqué un

élément dedans.

CSS

.droite
Flotter à droite;
Largeur: 300px;
Border: 3px Purple solide;
rembourrage: 5px;

En utilisant la propriété Float, nous flottons la div entière et le contenu à l'intérieur à droite.

Sortir

Le conteneur Div a été lancé avec succès à droite.

Alignement vertical

Ici, nous avons expliqué certaines façons que vous pouvez utiliser pour aligner les éléments verticalement.

Comment aligner les éléments verticalement en utilisant un rembourrage

Supposons que vous souhaitiez centrer verticalement un texte présent dans un conteneur div.

Html

Ce paragraphe est centré verticalement.

Ici, nous avons créé un élément div et imbriqué un

élément à l'intérieur.

CSS

.centre
rembourrage: 80px 0;
Border: 3px Purple solide;

Dans le code CSS ci-dessus, nous donnons le rembourrage de 80px en haut et en bas et 0px de la gauche et de la droite 0px vers le

tag pour centrer l'aligner à l'intérieur du div.

Sortir

Le texte a été aligné au centre avec succès.

Comment aligner les éléments en utilisant la hauteur de ligne

En utilisant le même exemple que ci-dessus, nous pouvons également aligner le texte à l'aide de la propriété CSS Line-Height.

CSS

.centre
Heure de ligne: 200px;
Border: 3px Purple solide;
Texte-aligne: Centre;

.Centre P
hauteur de ligne: 1.5;
Affichage: bloc en ligne;

Réglez simplement la hauteur de ligne du conteneur div à 200px, puis définissez la hauteur de ligne de

élément à 1.5.

Sortir

Les éléments HTML ont été alignés verticalement et horizontalement à l'aide de la hauteur de ligne.

Comment aligner les éléments verticalement à l'aide de flexbox

Encore une fois, nous envisageons le même exemple et utilisons cette fois Flexbox pour aligner verticalement et horizontalement.

CSS

.centre
Affichage: flex;
Justification-contenu: centre;
Align-Items: Centre;
hauteur: 200px;
Border: Green massif 3px;

Ici, nous définissons l'affichage du conteneur Div en tant que flex et centre alignant le contenu et les éléments présents à l'intérieur du conteneur div à l'aide de propriétés de justification et d'alignement des éléments fournis par le Flex-Box CSS. De plus, nous lui offrons également une certaine hauteur et une frontière.

Sortir

Le texte est aligné avec succès (à la fois verticalement et horizontalement) en utilisant Flexbox.

Conclusion

Il existe diverses approches disponibles dans CSS pour aligner les éléments HTML tels que vous pouvez les aligner verticalement ainsi que horizontalement à droite, ou à gauche, ou au centre à l'aide de la propriété de position, de la propriété flottante, du rembourrage, de la hauteur de ligne ou de la flexion, etc. De plus, vous pouvez utiliser ces propriétés pour aligner le texte et les images apparaissant sur votre site Web. Nous avons discuté en détail de différentes approches selon des exemples appropriés, qui sont utiles lors de l'alignement du contenu sur vos pages Web.