Aligner des éléments sur une page

Dans cet article, vous apprendrez à aligner des éléments sur votre page PageFly.lign elements on your PageFly page.

Étape 1: sélectionnez le conteneur de l’élémentClick to copy

Dans notre exemple, il y a une section avec 2 colonnes. Dans la colonne de droite, nous avons des éléments d’en-tête, de paragraphe et de bouton.

Tout d’abord, nous devons comprendre comment les éléments sont contenus sur la page. Par exemple, nous sélectionnons l’élément Bouton et le fil d’Ariane affiche ses conteneurs: Section – Ligne – Colonne – Bouton.

Puisque nous voulons aligner ce bouton, nous devons sélectionner son conteneur qui est la colonne dans le fil d’Ariane.

Étape 2: aligner tous les éléments dans le conteneur sélectionnéClick to copy

Avant de passer aux étapes spécifiques, vous pouvez regarder la vidéo ci-dessous

Maintenant, nous voulons aligner l’élément Button au centre, sélectionnez la colonne> onglet Style> section TYPOGRAPHIE> cliquez sur l’icône Centrer sous Alignement du texte selon l’image ci-dessous

Étape 3: aligner un élément spécifique à l’intérieur d’un conteneur

Dans ce cas, nous souhaitons toujours que l’en-tête et le paragraphe soient alignés à gauche, procédez comme suit:

  • Choisissez le conteneur du texte de l’en-tête, qui est l’élément En-tête.
  • Accédez à l’onglet Style dans l’inspecteur d’éléments à droite.
  • Cliquez sur l’icône Gauche sous Alignement du texte de la section TYPOGRAPHIE.

Faites de même pour le paragraphe en sélectionnant Élément Paragraphe> onglet Style> section TYPOGRAPHIE> icône de gauche sous Alignement du texte. En conséquence, vous verrez quelque chose comme l’image ci-dessous.

La priorité des paramètres de styleClick to copy

N’oubliez pas que les paramètres des éléments imbriqués ont une priorité plus élevée que ceux de leurs conteneurs. Par exemple, si vous définissez l’alignement de la colonne sur “centre”, mais que l’élément de paragraphe de cette colonne est défini sur “gauche”, ce paragraphe sera aligné à gauche.

Navigate this category

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
Boost your holiday sales with PageFly's Thanksgiving Template 👉 Discover Now