CSS : Positionnement et mise en page

Centrer les éléments inline

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Apprenez à centrer des éléments de type inline au sein de leur conteneur parent. Il existe diverses approches autant pour des lignes textuelles que pour des images.
03:12

Transcription

Voyons diverses possibilités pour pouvoir centrer des éléments de type inline, c'est-à-dire des balises span par exemple ici, à l'intérieur de blocs. Comment peut-on les centrer aussi bien horizontalement que verticalement ? Donc déjà, on peut lorsqu'ils sont placés dans un bloc se dire, il est centré. Sauf que dès l'instant où on va donner une hauteur, par exemple 80 pixels à ce bloc ici, automatiquement, l'élément n'est plus centré. Alors il y a deux possibilités, soit au lieu de donner une hauteur au bloc ici je le commente. Ce qu'on va faire, c'est on va dire, je vais avoir du padding dans ce bloc et ce padding va être de 80 pixels par exemple. Ici, je vais mettre une hauteur arbitraire et donc en fait on l'impression que l'élément est centré en fait il n'est pas centré. Il est simplement entouré par quelque chose de défini, de fixe, et donc puisque c'est la même chose en haut et en bas ça donne cette impression de centrage. Alors, maintenant pour le centrer horizontalement, c'est très simple il suffit de faire un text-align ici et de dire que ce text-align est center Crt+S et l'élément va se centrer automatiquement. Donc, voilà une des possibilités de centrage. Si maintenant, vous ne pouvez pas jouer sur le padding et que vous avez donc une hauteur, je vais le placer à cet endroit-là, CTRL+S, on voit bien que l'élément n'est pas centré, alors là c'est pas compliqué, il suffit de donner une ligne d'écriture line-height à cet élément ici donc line-height, qui équivaut à la hauteur de l'élément, donc 80 pixels. Et si je donne un line-height à cet élément CTRL+S, vous voyez bien que automatiquement, il se centre alors après c'est indépendant de la FONT vous avez vu que la FONT d'écriture de ce span est de 12 peut être par défaut. Maintenant, si vous voulez vous pouvez définir un FONT size par exemple à 60 pixels qui n'a rien à voir avec la hauteur et dès que vous allez donner cette hauteur vous voyez l'élément reste centré à l'intérieur de ce bloc et ayant toujours une line-height de 80, alors je vais donner une FONT size plus petite pour mieux le visualiser c'est trop engoncé le reste mais vous voyez qu'on peut centrer les éléments inline de cette manière-là. Alors, maintenant on va avoir des fois des cas de figures où on va se retrouver avec des blocs image. Donc, ici on avait vu que par exemple, si je donnais un text-align à mon élément parent ici et que je le mets CENTER ici on centre aussi bien un span à l'intérieur d'un bloc P qu'une image à l'intérieur de ce bloc P au niveau horizontal. Au niveau vertical, on avait vu qu'on pouvait donner un line-height et si je prends un line-height ici donc de 200 pixels je dit mon bloc P va s'écrire sur un line-height de 200 pixels vous voyez que ça centre automatiquement le texte mais pas l'image. Rien de bien compliqué ! Je vais venir ici travailler sur ce qu'on appelle le vertical-align et je vais dire à mon image que son vertical-align est de middle, CTRL+S, et on voit bien que l'image se centre au centre horizontal et vertical aussi bien que le texte. Donc, en fait c'est un bloc flotté. La différence c'est que le line-height affecte bien une ligne d'écriture mais pas des éléments de type image qui sont de type inline. Bon maintenant, on peut quand même revenir modifier ici le FONT size de ce texte en le mettant à 80 pixels et on voit bien que tout reste centré autant horizontal que vertical.

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 !