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:061058parcourir
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 deExemple
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 deExemple
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!