CSS : Positionnement et mise en page

Centrer les éléments de type bloc

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Travaillez avec des éléments de type bloc. Il existe différentes approches en fonction des contextes et des besoins. Chacune de ces approches permettent de répondre à des situations différentes.
07:40

Transcription

Plus fréquemment rencontré maintenant, allons explorer le positionnement centré horizontalement et vertical de bloc dans des blocs. Alors, pour la majeure partie des exemples on va utiliser des sections qui contiennent un paragraphe ou plusieurs dans certains cas pour pouvoir centrer les paragraphes au sein de la section et éventuellement la section au sein du body. Alors, divers cas de figure, les données sont pas forcément les mêmes au départ. Ici, si par exemple, la section connait sa largeur, sa hauteur, et le paragraphe connait sa largeur et sa hauteur. C'est un peu plus facile. Un élément rapide qu'il faut garder sous le coude dans le cas où on n'a pas forcément besoin du vertical c'est le fait de se dire qu'on va pouvoir centrer par exemple en faisant un margin : 0 auto; on arrive à centrer horizontalement directement l'élément. On serait tenté de penser qu'en ajoutant auto devant, on centrerait également vertical, mais non ça fonctionne pas. Ceci dit, on va le commenter, on va regarder une autre possibilité qui va être d'utiliser le positionnement. Donc, si on passe par un positionnement absolute, on va pouvoir dire que maintenant le top on connait la hauteur puisqu'on connait qu'on a une hauteur de 100vh ben si je positionne à 50vh, j'ai positionné mon top à la moitié du document. Alors, ne tenez pas compte des parallax qui sont donnés par Dreamweaver puisqu'ici les ascenseurs sont purement mécaniques dans Dream et donc ne sont pas pris en compte dans la hauteur de vh dans ce cas-là. Donc en vérité, il faut regarder par rapport à la fin des ascenseurs à chaque fois. Le problème c'est que quand bien même, même si on est au centre du document, il faut pouvoir modifier cet élément ici, le repositionner vers la hauteur, et ça on connait puisqu'on connait sa hauteur qui est de 200 pixels. Il suffit de faire un margin-top, ici maintenant de -100 pixels et on va le positionner. Pour le centrer horizontalement, c'est la même chose, on va faire un left qui sera à 50vw et un margin-left qui va se positionner maintenant à -30%. On peut enregistrer et se dire que tout est bon. Sauf que c'est pas réellement bon parce que le positionnement absolu qu'on a fait là, à nos yeux il nous indique quelque chose de bon mais en fait il se positionne pas par rapport à la section, il se positionne par rapport au body, et donc à ce moment-là, la seule manière de s'assurer que l'on se positionne par la section, c'est de venir explicitement positionner la section en disant qu'elle a une position relative, et là vous avez vu le petit décalage de quelques pixels qui correspond à la marge par défaut du body qui a été appliqué. Là, cette fois-ci on peut enregistrer et se dire que c'est bon pour cet exemple-là. Si on ne connait pas maintenant la hauteur de l'élément on va se dire, on est un peu embêtés parce qu'on pourra pas faire un margin-top de moins la hauteur de l'élément ou un margin-left. Mais on peut quand même faire la même technique en position relative et position absolue. Et cette fois-ci on va utiliser un top qui sera à 50vh, toujours pareil, puisqu'on connait la hauteur de notre parent. Mais on va utiliser un transform ici qui sera un translateY de 50%, et là on va se bouger 50% de notre propre hauteur donc il n'y a pas de souci de ce côté-là. On va faire exactement pareil pour le left de 50vw sauf que maintenant, au lieu de refaire un translateIX, on va pouvoir commenter le translate de transform de cette manière-là et faire un transform : translate direct sans X ni Y et faire -50% et là on peut se positionner correctement sur l'élément. Sur ce troisième exemple, on pourrait avoir besoin de positionner 2 éléments de type P, qui n'ont pas forcément les mêmes largeurs, et il faudrait les centrer par rapport à leur parent. Alors là, un peu de gymnastique, on va dire qu'on va utiliser un margin: 0 auto; cette fois-ci, pour pouvoir centrer la section de manière automatique au niveau du centre. Et puis on va transformer les éléments de type P en inline-blocks, donc ça va les transformer, ça va garder leur propriété de type bloc, mais ça va les transformer en éléments de type inline, donc les mettre les uns à la suite des autres puisqu'ils ont des largeurs définies de 24 et 50% qui font pas la totalité de la section. Maintenant, on va pouvoir utiliser un text-align-center; au niveau de la section. Ça va nous centrer les éléments. Bien entendu, on va pouvoir récupérer le centrage de chacun de ces éléments en E, les recentrant à gauche cette fois-ci. Et puis, dernier élément, on va pouvoir utiliser un vertical-align:middle; pour pouvoir centrer les paragraphes au sein de leur section. Ici, un autre cas de figure, avec une section qui contient un titre et plusieurs paragraphes. On connait la hauteur de la section, qui fait la hauteur globale de la page. Et puis sa largeur, 60%. Là on va pouvoir utiliser des flex par exemple. On va pouvoir dire... Déjà, commencer par centrer à 0 auto; notre élément puisqu'il a une largeur de 60%. Automatiquement, autant le centrer de type bloc. Et là on va dire que son display c'est un mode flex. Oh là là, confusion totale puisque quand on passe par flex par défaut la direction du flex va être en colonne et donc il va essayer de mettre le h1 et les 2 paragraphes en colonne au sein de la section. Ce qu'on va faire, c'est de suite changer la direction en les mettant en rangées. Donc il va automatiquement essayer de tous les aligner, les uns à la suite des autres sur la même rangée. Là, on va les placer en colonnes, pour les égrainer. Donc, de ce côté-là, c'est parfait. Par contre, on n'est pas centré. Donc pour les centrer, on va faire un justify-content: center; et un align-item:center; pour pouvoir aligner également chacun des éléments au centre de la section. Le petit souci, c'est que le lui, va se centrer également. Si on le veut sur la gauche, il va falloir faire une place à part et faire un align-self, l'aligner lui tout seul sur un flex-start pour lui dire aligne-toi sur ton côté gauche. On va pouvoir utiliser les flex aussi pour utiliser ce positionnement. On verra les flex en détail un peu plus tard, bien qu'on reverra les display-inline un peu plus tard aussi de manière différente. Voilà, une autre possibilité un peu rock&roll, qui va nous permettre de positionner ce paragraphe au sein de la section de manière alignée. Donc ici, on va pouvoir dire que d'entrée de jeu, on aligne le texte au centre du bloc. Parfait ! Et on va créer une pseudo classe before à la section en lui disant, je vais te placer un petit espace, et je vais demander à ce petit espace d'être en mode inline-block. Donc, il devient de type inline et donc cet élément qui devient inline, va pouvoir utiliser un centrage vertical middle. On va positionner le p pareillement de la manière inline. Vous savez que ces 2 éléments sont 2 éléments en ligne qui partagent le même espace. Dès l'instant où on va dire à notre petit espace qu'il fait une hauteur de 100%, automatiquement, il va chasser l'élément puisque il y a une petite problématique de 4 pixels qui se gèrent entre 2 éléments de type inline-block. Donc, on va le récupérer en disant à cette section, on la dégage de 4 pixels, comme ça elle sort de l'espace dans lequel elle est et ça fait remonter en même temps le bloc de type P qui peut remonter à ce moment-là. Si je centre mon vertical-align sur ma section before en middle, automatiquement elle va se centrer. Et, il me reste plus maintenant qu'à centrer le P également de manière middle, puisque tous les 2 n'ont pas cette même hauteur de ligne et donc ils vont se centrer maintenant de manière similaire sur l'espace parent. Enfin, une dernière technique, que l'on reverra également au sein de notre exercice ici qui va être de dire que cette section en fait, je vais l'afficher comme un tableau. Donc du fait que c'est un tableau, tous les éléments qu'il contient peuvent être assimilés eux-mêmes, à un table-cell. Donc je vais créer un élément de type p et je vais faire un display: table-cell; pour dire, tu es une cellule de tableau. Et de ce fait-là, je peux utiliser le texte-align center et le vertical-align middle directement puisque les tableaux connaissent ce genre de positionnement et ça m'a permis de positionner directement un élément très facilement au sein de son conteneur autant horizontalement que verticalement. Voilà ! Donc, plusieurs techniques qu'on reverra en détail qui vont nous permettre justement de détourner à chaque fois les propriétés natives d'un élément en lui attribuant les propriétés natives d'un autre élément pour pouvoir jouer sur les positionnements.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :31 août 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !