Centre de position absolue CSS

«Le centre de position absolue signifie centrer n'importe quel texte, n'importe quelle image, n'importe quelle boîte ou tout groupe d'objets verticalement et horizontalement. Dans CSS, nous pouvons utiliser la propriété de position absolue pour centrer les objets et le groupe d'objets. Nous pouvons également utiliser une position absolue pour centrer l'objet dans la seule direction verticale ou la direction horizontale et aussi à la fois verticalement et horizontalement. Dans ce tutoriel, nous démontrerons des exemples pour expliquer comment utiliser la propriété de position absolue dans CSS pour centrer les objets verticalement, horizontalement et les deux. Nous couvrirons ce concept dans ce tutoriel."

Exemple n ° 1: Centre de position absolue horizontalement

Nous ferons tous ces exemples dans le code Visual Studio. Nous devons créer le fichier HTML dans notre code Visual Studio et commencer à écrire le code dessus. Après avoir terminé le code qui est donné dans l'image, vous devez enregistrer ce fichier avec le «.Extension de fichier html "car il s'agit d'un fichier" html ".

Mentionnez le type de document «HTML» comme nous le savons, c'est un code HTML. Ensuite, ouvrez «» et «». La méta est définie ci-dessous, qui est «charset = utf-8», ce qui permet d'accéder à différents caractères. Nous lions également ce fichier actuel avec le fichier CSS dans lequel nous faisons du style et utilisons la propriété de position absolue. Pour décrire l'association, «rel» est là; Le type est «Text / CSS» et le «HREF» dans lequel nous passons le nom du fichier. Nous lions le «Centerstyle.CSS »avec ce fichier actuel. Maintenant, après avoir fermé le «», nous allons utiliser le «». Nous avons une rubrique dans le corps et une classe «div» avec le nom «élément». Enfin, nous devons fermer toutes les balises en séquence. Tout d'abord, fermez «div», «corps», puis les tags «html».

Code CSS

Voici le fichier CSS. Lorsque vous créez ce fichier, vous utilisez le «.Extension de fichier CSS "car c'est notre fichier CSS. Vous devez vous rappeler que vous avez enregistré ce fichier avec le même nom que vous avez mentionné dans votre fichier HTML. Maintenant ici, nous allons styliser cette classe d'éléments en utilisant différentes propriétés. Lieu ".»Et écrivez« élément »comme c'est le nom de la classe« div ». Nous ajustez la «hauteur» et la «largeur» en tant que «100px» et «200px» respectivement. Placer «orange» comme couleur d'arrière-plan. Et blanc pour la couleur de la police. Maintenant, nous allons utiliser la propriété «position absolue». Définir la «position» comme «absolu». De la «gauche», c'est «0» et de la «droite», il est défini comme «0». Ici, les marges supérieure et inférieure sont «0» et la gauche; Les marges bonnes sont «Auto». Cette marge automatique gauche et droite est utilisée, il faut donc la marge automatique pour donner la largeur de l'objet.

La sortie est affichée sur le navigateur. Appuyez sur «Alt₊ B ”sur le fichier HTML pour afficher la sortie. Nous colletons également la sortie du code HTML et CSS ci-dessus ci-dessous.

Sortir

Exemple # 2: centre de position absolue verticalement

Dans cet exemple, nous utilisons le même fichier HTML que nous avons créé dans l'exemple précédent. Changez simplement la cap du «centre de position absolue horizontalement» en «centre de position absolue verticalement».

Ici, nous avons réglé la couleur de l'arrière-plan sur «violet». Lorsque nous devons définir la position absolue verticalement centrée, nous avons mis la position à «Absolute» et mentionnez ici «Top: 0» et «Bottom: 0». Nous définissons également la marge de cette «auto» pour «top» et «inférieur». La valeur «0» est définie pour «gauche» et «droite». Vous pouvez également vérifier la sortie de cet exemple, que nous avons collé ci-dessous.

Sortir

Dans cette sortie, la boîte est placée verticalement au centre en utilisant la propriété de position absolue. Dans cette image, l'espace entre le texte et la boîte montre qu'il est placé au centre en position verticale.

Exemple # 3: Centre de position absolue à la fois horizontalement et verticalement

Dans notre troisième exemple, nous allons définir l'objet à la position centrale absolue. Ici, l'objet est centré à partir de la verticale et aussi de la position horizontale. Essayons ce troisième exemple.

Ici, dès le début, le code est le même que nous avons discuté dans notre exemple précédent. Nous avons juste changé le code de la balise «» un peu. Nous créons une classe de «div» en utilisant «conteneur» comme nom de la classe. Avant de clôturer cette balise «div», nous créons une autre «classe div» et cette fois, le nom est «données». Créez une rubrique en utilisant le «

"Tag et écrivez également un paragraphe à l'intérieur des balises" ". Ensuite, utilisez les balises de clôture pour les deux balises «».

Code CSS

Dans le code CSS, ouvrez d'abord les supports du paragraphe qui est écrit à l'intérieur de la classe de conteneurs. La «hauteur» de ce conteneur est «60px» et la «largeur» est également «60px». Nous appliquons un rembourrage ici sous le nom de «10px» afin qu'il générera un espace «10px» entre le contenu et la bordure. Ici, la position texte est «relative». Nous voulons dessiner la bordure autour du conteneur ou de la boîte, nous utilisons donc la propriété «bordure» pour cela. Nous définissons la largeur «bordure» comme «3px», le type de bordure est «solide», et la couleur de cette bordure est «vert». Ainsi, lorsque nous afficherons cela sur le navigateur, la bordure sera de couleur verte, solide et aussi de largeur «3px». Nous utilisons «rose» comme couleur de fond. Et sélectionnez «noir» pour la police. Ainsi, la police ou le texte s'affichera en couleur «noire». Maintenant, nous utilisons ici la propriété «Centre de position absolue», et il définira l'objet et se dirigera vers le centre de l'écran.

Sortir

Exemple n ° 4

Ici, nous colletons le code de HTML ci-dessous pour cet exemple. Nous utilisons le code ci-dessus et créons des changements mineurs. Nous supprimons simplement le paragraphe et la classe de données DIV dans cet exemple et créons un autre fichier CSS pour cet exemple.

Code CSS

La «hauteur» du conteneur dans cet exemple est «70px» et «la largeur» est «300px». Utilisez la «position» comme «absolu». Maintenant, nous dessinons la frontière dans laquelle nous définissons sa «largeur» égale à «4px», la bordure affichera «solide», car le type de cette bordure est sélectionné comme «solide». La couleur est «noir». Ensuite, définissez la couleur du fond intérieur sur «blanc». La couleur du texte que nous utilisons ici est «noir». Maintenant, nous plaçons la propriété de position absolue. Notre marge supérieure est «50%» et aussi la même pour la marge «gauche». Il définit l'objet «50%» du haut et aussi de la gauche. Nous allons utiliser la dernière propriété, et c'est la propriété «Transformer». Il transforme l'objet en arrière, la moitié de sa largeur et aussi de la hauteur. Il agira par rapport au corps de l'objet. Il inversera l'objet «50%» la moitié inverse de sa largeur et «50%» la moitié inverse de sa hauteur.

Sortir

Conclusion

Dans ce tutoriel, nous avons couvert le concept du centre de position absolue dans CSS. Nous avons expliqué comment centrer l'objet verticalement et horizontalement dans des exemples distincts, puis nous avons fourni deux autres exemples dans lesquels nous avons centré l'objet à la fois verticalement et horizontalement en même temps. Nous avons discuté de quatre exemples ici dans ce tutoriel. Nous avons effectué tous les exemples et avons également collé les captures d'écran de sortie. Vous apprendrez facilement ce centre de position absolue dans CSS après l'étude approfondie de ce tutoriel, et j'espère qu'elle vous sera très utile lorsque vous l'essayerez par vous-même.