简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

En HTML, centrez un élément et alignez à droite/gauche les autres éléments flexbox

WBOY
Libérer： 2023-09-04 10:25:06
avant
1081 Les gens l'ont consulté

En HTML, centrez un élément et alignez à droite/gauche les autres éléments flexbox

Disons que nous avons P, Q,R,S,T alignés au centre d'une page Web −

                                P Q R S T
Copier après la connexion

Nous voulons que ce qui précède reste le même, sauf que celui le plus à droite, c'est-à-dire T, se déplace vers la droite, comme ceci −

                                 P Q R S                                 T
Copier après la connexion

Regardons maintenant quelques exemples pour mettre en œuvre ce que nous avons vu ci-dessus.

Centrez un et alignez à droite/gauche un autre élément flexbox avec des marges automatiques

La traduction chinoise de

Exemple

est :

Exemple

La mise en page ci-dessus peut être réalisée sur une page Web en utilisant des marges automatiques et un nouvel élément flexible invisible −

<html>
<title>Example</title>
<head>
   <style>
      li:first-child {
         margin-right: auto;
         visibility: hidden;
      }
      li:last-child {
         margin-left: auto;
         background: orange;
      }
      ul {
         padding: 0;
         margin: 0;
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center;
      }
      li {
         display: flex;
         margin: 3px;
         padding: 10px;
         background: red;
      }
      p {
         text-align: center;
         margin-top: 0;
      }
   </style>
<head>
<body>
   <ul>
      <li>T</li>
      <li>P</li>
      <li>Q</li>
      <li>R</li>
      <li>S</li>
      <li>T</li>
   </ul>
</body>
<html>
Copier après la connexion

Centrez un et alignez à droite/gauche un autre élément flexbox avec un pseudo-élément

Dans cet exemple, nous utiliserons un pseudo-élément de même largeur que T. Utilisez ::before pour le placer au début du conteneur.

La traduction chinoise de

Exemple

est :

Exemple

Regardons un exemple maintenant−

<html>
<title>Example</title>
<head>
   <style>
      ul::before {
         content: "T";
         margin: 1px auto 1px 1px;
         visibility: hidden;
         padding: 5px;
         background: orange;
      }
      li:last-child {
         margin-left: auto;
         background: orange;
      }
      ul {
         padding: 0;
         margin: 0;
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center;
      }
      li {
         display: flex;
         margin: 3px;
         padding: 10px;
         background: red;
      }
   </style>
<head>
<body>
   <ul>
      <li>P</li>
      <li>Q</li>
      <li>R</li>
      <li>S</li>
      <li>T</li>
   </ul>
</body>
<html>
Copier après la connexion

Centrez un et alignez à droite/à gauche l'autre élément flexbox avec la disposition en grille

Dans cet exemple, créez une grille avec plusieurs colonnes. Positionnez ensuite vos éléments dans les colonnes du milieu et de fin. 

<html>
<title>Example</title>
<head>
   <style>
      ul {
         display: grid;
         grid-template-columns: 1fr repeat(4, auto) 1fr;
         grid-column-gap: 5px;
         justify-items: center;
      }
      li:nth-child(1) {
         grid-column-start: 2;
      }
      li:nth-child(5) {
         margin-left: auto;
      }
      ul {
         padding: 0;
         margin: 0;
         list-style: none;
      }
      li {
         padding: 10px;
         background: red;
      }
      p {
         text-align: center;
      }
   </style>
<head>
<body>
   <ul>
      <li>P</li>
      <li>Q</li>
      <li>R</li>
      <li>S</li>
      <li>T</li>
   </ul>
</body>
<html>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
Élément central boîte flexible Alignement
source：tutorialspoint.com
Article précédent：Afficher le texte barré en HTML Article suivant：Comment ajouter des sauts de ligne dans une zone de texte HTML ?
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Déplacez le contenu vers la gauche en ajoutant la propriété Largeur J'ai prévu des marges au corps. main {gauche marge : 200px ; marge droite : 200px ; aligne...
Depuis 2024-04-06 22:01:35
0
3
816
Comment empiler les éléments flottants verticalement plutôt qu'horizontalement en CSS ? J'essaie de créer une page Web avec deux colonnes, avec le contenu principal d'un côté et ...
Depuis 2024-04-06 20:45:26
0
2
386
Existe-t-il un moyen de forcer le texte de la flexbox à être centré verticalement, quel que soit l'autre code CSS dont nous disposons ? J'ai le code CSS suivant qui fait partie d'un code CSS plus vaste utilisé dans un site Web...
Depuis 2024-04-06 20:41:51
0
1
518
Impossible d'obtenir l'élément d'entrée du site Web J'essaie donc d'obtenir un élément d'entrée de Twitter mais lorsque je l'exécute, cela con...
Depuis 2024-04-06 18:59:57
0
1
442
Méthode de niveau supérieur pour remplacer une chaîne par du code HTML (généré à partir d'un tableau) Étant donné une chaîne comme celle-ci...$htmlPattern="Usernameis:#name#andusercompany...
Depuis 2024-04-06 17:40:41
0
2
410
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！