CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Techniques de centrage CSS avec les positions absolue et relative

Techniques de centrage CSS avec les positions absolue et relative

Première méthode
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Centrer un élément par-dessus un autre

Objectifs

Apprendre à centrer un élément par-dessus un autre en utilisant la position absolue et relative.
Comprendre l'utilisation des techniquess de margin négatif pour un centrage précis.

Résumé

Découvrez comment utiliser les positions absolue et relative pour centrer un élément par-dessus un autre sans utiliser les propriétés margin ou padding.

Description

Dans cette leçon, nous abordons une méthode efficace pour centrer un élément au-dessus d'un autre en utilisant les positions CSS absolue et relative. Plutôt que d'utiliser des margin ou des padding, nous exploitons les propriétés de positionnement pour garantir un centrage précis.

Le processus implique de définir une position relative pour l'élément parent afin de créer un point d'ancrage. Ensuite, l'élément à centrer est mis en position absolue et positionné à 50% de la hauteur et de la largeur de son parent. Pour assurer un alignement parfait, une technique de margin négatif est appliquée, corrigeant la largeur de l'élément pour qu'il s'aligne parfaitement au centre.

Cette méthode est particulièrement utile dans les mises en page complexes où l'espacement et l'alignement doivent être gérés avec précision, garantissant ainsi une expérience utilisateur optimale sur différents dispositifs.

Voir plus

Questions - réponses

Pourquoi la position relative est-elle utilisée sur l'élément parent?
La position relative est utilisée sur l'élément parent pour créer un point de référence pour l'élément enfant qui sera positionné en absolu par rapport à cet élément parent.
Quelle est la fonction de la technique du margin négatif?
La technique du margin négatif ajuste la position de l'élément pour qu'il soit parfaitement centré en soustrayant une fraction de la largeur ou de la hauteur de l'élément.
Quelle propriété CSS est modifiée pour que l'élément H1 s'aligne au centre de son parent?
La propriété CSS width est modifiée pour que l'élément H1 ait une largeur définie, permettant une meilleure application du margin négatif pour un alignement central.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 5 months
Commentaire
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 1 year
Commentaire
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 years
Commentaire
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 3 years
Commentaire
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !