Heim >Web-Frontend >HTML-Tutorial >Zentrieren Sie in HTML ein Element und richten Sie andere Flexbox-Elemente rechts/links aus
Zentrieren Sie in HTML ein Element und richten Sie andere Flexbox-Elemente rechts/links aus
- WBOYnach vorne
- 2023-09-04 10:25:061148Durchsuche
Nehmen wir an, wir haben P, Q, R, S, T in der Mitte einer Webseite ausgerichtet −
P Q R S T
Wir möchten, dass das Obige gleich bleibt, außer dass sich das ganz rechte, d. h. T, nach rechts bewegt, so −
P Q R S T
Schauen wir uns nun einige Beispiele an, um das umzusetzen, was wir oben gesehen haben.
Eins zentrieren und das andere Flexbox-Element rechts/links mit automatischen Rändern ausrichten
Die chinesische Übersetzung vonBeispiel
lautet:Beispiel
Das obige Layout kann auf einer Webseite durch die Verwendung automatischer Ränder und eines neuen, unsichtbaren Flex-Elements erreicht werden −
<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>
Eins zentrieren und das andere Flexbox-Element rechts/links am Pseudoelement ausrichten
In diesem Beispiel verwenden wir ein Pseudoelement mit der gleichen Breite wie T. Verwenden Sie ::before, um es am Anfang des Containers zu platzieren.
Die chinesische Übersetzung vonBeispiel
lautet:Beispiel
Schauen wir uns jetzt ein Beispiel an −
<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>
Zentrieren Sie eins und richten Sie das andere Flexbox-Element rechts/links mit dem Rasterlayout aus
Erstellen Sie in diesem Beispiel ein Raster mit mehreren Spalten und positionieren Sie dann Ihre Elemente in der Mittel- und Endspalte.
<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>
Das obige ist der detaillierte Inhalt vonZentrieren Sie in HTML ein Element und richten Sie andere Flexbox-Elemente rechts/links aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!