Maison > Article > interface Web > En HTML, centrez un élément et alignez à droite/gauche les autres éléments flexbox

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

WBOYavant: 2023-09-04 10:25:061127parcourir

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

                                P Q R S T

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

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>

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>

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>

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Afficher le texte barré en HTMLArticle suivant：Afficher le texte barré en HTML

Articles Liés

Voir plus