Heim > Artikel > Web-Frontend > Wie richtet man Elemente innerhalb eines Divs vertikal aus?
Wie richtet man Elemente innerhalb eines Divs vertikal aus?
- WBOYnach vorne
- 2023-08-20 17:37:191179Durchsuche
Mit einer der folgenden Methoden können wir Elemente in einem Div ganz einfach vertikal ausrichten: −
- Positionsattribut
- Zeilenhöhenattribut
- Attribute füllen
Schauen wir uns die Beispiele einzeln an -
Verwenden Sie das Positionsattribut, um Elemente in einem Div vertikal auszurichten
Die Positionseigenschaft wird zum Positionieren eines Elements verwendet. Sie kann in Verbindung mit den Eigenschaften oben, rechts, unten und links verwendet werden, um ein Element an der gewünschten Stelle zu positionieren
-
statisch − Elementboxen werden als Teil des normalen Dokumentflusses nach vorherigen und folgenden Elementen angeordnet.
-
relativ − Der Kasten des Elements wird als Teil des normalen Flusses angeordnet und dann um einen gewissen Abstand versetzt.
-
absolut − Die Box eines Elements wird relativ zu seinem enthaltenden Block angeordnet und vollständig aus dem normalen Fluss des Dokuments entfernt.
-
fest − Die Elementbox ist absolut positioniert und hat die Verhaltensbeschreibung Position: absolut. Der Hauptunterschied besteht darin, dass der enthaltende Block aus fest positionierten Elementen immer das Ansichtsfenster ist.
an Die chinesische Übersetzung von
Beispiellautet:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Align Elements</title>
<style>
#demo1 {
position: relative;
}
#demo2 {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
#demo1 {
background-color: yellow;
border: 2px solid gray;
height: 15em;
}
#demo2 {
background-color: skyblue;
border: 1px solid orange;
width: 100%;
}
</style>
</head>
<body>
<h1>Vertically Align Elements</h1>
<p>Use the position property:</p>
<div id="demo1">
<div id="demo2">
<p>This is a demo text</p>
<p>This is another demo text</p>
</div>
</div>
</body>
</html>
Verwenden Sie die Eigenschaft line-height, um Elemente in einem Div vertikal auszurichtenDas Attribut „line-height“ ändert die Höhe des Inline-Felds, aus dem eine Textzeile besteht. Hier sind die möglichen Werte für line-height -
-
normal − weist den Browser an, die Zeilenhöhen innerhalb von Elementen auf einen „angemessenen“ Abstand festzulegen.
-
Zahl − Die tatsächliche Höhe der Linien im Element ist dieser Wert multipliziert mit der Schriftgröße des Elements.
-
length − Die Höhe der Zeile im Element ist der angegebene Wert.
-
Prozentsatz − Die Höhe einer Zeile in einem Element wird als Prozentsatz der Schriftgröße des Elements berechnet.
Die chinesische Übersetzung von
Beispiellautet:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Align Elements</title>
<style>
p {
margin: 0;
}
#demo {
border: 3px solid yellow;
background-color: orange;
height: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<h1>Vertically Aligned Element</h1>
<p>Use the line-height property:</p>
<div id="demo">
<p>This is demo text</p>
</div>
</body>
</html>
Verwenden Sie das Padding-Attribut, um Elemente in div vertikal auszurichtenMit der Eigenschaft
padding können Sie angeben, wie viel Platz zwischen dem Inhalt eines Elements und seinem Rand bleiben soll. Der Wert dieses Attributs sollte Länge, Prozentsatz oder das Wort „erben“ sein. Wenn der Wert geerbt ist, entspricht seine Auffüllung der des übergeordneten Elements. Wenn Prozentsätze verwendet werden, beziehen sich die Prozentsätze auf das enthaltende Feld.Die folgenden CSS-Eigenschaften können zur Steuerung von Listen verwendet werden. Mithilfe der folgenden Eigenschaften können Sie auch unterschiedliche Füllwerte für jede Seite der Box festlegen -
- Der
- padding-bottom gibt die untere Polsterung eines Elements an. Das
- padding-top gibt die obere Polsterung eines Elements an. Der
- padding-left gibt den linken Abstand eines Elements an. Das
- padding-right gibt die richtige Polsterung eines Elements an. Das
- padding dient als Abkürzung für die vorangehenden Eigenschaften.
Die chinesische Übersetzung von
Beispiellautet:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Align Element</title>
<style>
.demo {
padding: 60px 0;
border: 2px solid #5c34eb;
background-color: orange;
}
</style>
</head>
<body>
<h1>Vertically Align Element</h1>
<p>Use the padding property:</p>
<div class="demo">
<p>This is demo text.</p>
<p>This is another text.</p>
</div>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie richtet man Elemente innerhalb eines Divs vertikal aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!