Mit einer der folgenden Methoden können wir Elemente in einem Div ganz einfach vertikal ausrichten: −
Schauen wir uns die Beispiele einzeln an -
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
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>
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
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>
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 -
Die chinesische Übersetzung von
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!
