Wie richtet man Elemente innerhalb eines Divs vertikal aus?
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 id="Vertically-Align-Elements">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>
Nach dem Login kopieren
Verwenden Sie die Eigenschaft line-height, um Elemente in einem Div vertikal auszurichten<!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 id="Vertically-Align-Elements">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>
Das 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 id="Vertically-Aligned-Element">Vertically Aligned Element</h1>
<p>Use the line-height property:</p>
<div id="demo">
<p>This is demo text</p>
</div>
</body>
</html>
Nach dem Login kopieren
Verwenden Sie das Padding-Attribut, um Elemente in div vertikal auszurichten<!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 id="Vertically-Aligned-Element">Vertically Aligned Element</h1>
<p>Use the line-height property:</p>
<div id="demo">
<p>This is demo text</p>
</div>
</body>
</html>
Mit 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 id="Vertically-Align-Element">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>
Nach dem Login kopieren
<!DOCTYPE html>
<html>
<head>
<title>Align Element</title>
<style>
.demo {
padding: 60px 0;
border: 2px solid #5c34eb;
background-color: orange;
}
</style>
</head>
<body>
<h1 id="Vertically-Align-Element">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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1359
52
Was sind in JavaFX die verschiedenen Pfadelemente?
Aug 28, 2023 pm 12:53 PM
Das Paket javafx.scene.shape stellt einige Klassen bereit, mit denen Sie verschiedene 2D-Formen zeichnen können. Dies sind jedoch nur primitive Formen wie Linien, Kreise, Polygone und Ellipsen usw. Wenn Sie also komplexe benutzerdefinierte Formen zeichnen möchten, benötigen Sie um die Path-Klasse zu verwenden. Path-Klasse Path-Klasse Mit diesem geometrischen Umriss, der eine Form darstellt, können Sie benutzerdefinierte Pfade zeichnen. Zum Zeichnen benutzerdefinierter Pfade stellt JavaFX verschiedene Pfadelemente bereit, die alle als Klassen im Paket javafx.scene.shape verfügbar sind. LineTo – Diese Klasse repräsentiert die Pfadelementlinie. Es hilft Ihnen, eine gerade Linie von den aktuellen Koordinaten zu den angegebenen (neuen) Koordinaten zu zeichnen. HlineTo – Dies ist die Tabelle
C++-Programm: Fügen Sie einem Array ein Element hinzu
Aug 25, 2023 pm 10:29 PM
Ein Array ist eine lineare sequentielle Datenstruktur, die dazu dient, homogene Daten an zusammenhängenden Speicherorten zu speichern. Wie andere Datenstrukturen müssen Arrays in der Lage sein, Elemente auf effiziente Weise einzufügen, zu löschen, zu durchlaufen und zu aktualisieren. In C++ sind unsere Arrays statisch. C++ bietet auch einige dynamische Array-Strukturen. Bei einem statischen Array können Z-Elemente im Array gespeichert werden. Bisher haben wir n Elemente. In diesem Artikel erfahren Sie, wie Sie in C++ Elemente am Ende eines Arrays einfügen (auch als anhängende Elemente bezeichnet). Verstehen Sie das Konzept anhand von Beispielen. Die Verwendung des Schlüsselworts „this“ ist wie folgt: GivenarrayA=[10,14,65,85,96,12,35,74,69]Afterin
CSS-Übergangseffekt: So erzielen Sie den Gleiteffekt von Elementen
Nov 21, 2023 pm 01:16 PM
CSS-Übergangseffekt: So erzielen Sie den Gleiteffekt von Elementen Einführung: Im Webdesign kann der dynamische Effekt von Elementen das Benutzererlebnis verbessern, wobei der Gleiteffekt ein häufiger und beliebter Übergangseffekt ist. Durch die Übergangseigenschaft von CSS können wir leicht den gleitenden Animationseffekt von Elementen erzielen. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS-Übergangseigenschaften den Gleiteffekt von Elementen erzielen, und es werden spezifische Codebeispiele bereitgestellt, um den Lesern ein besseres Verständnis und eine bessere Anwendung zu ermöglichen. 1. Einführung in den CSS-Übergangsattributübergang CSS-Übergangsattributtra
CSS-Transformation: So erzielen Sie den Rotationseffekt von Elementen
Nov 21, 2023 pm 06:36 PM
CSS-Transformation: Um den Rotationseffekt von Elementen zu erzielen, sind spezifische Codebeispiele erforderlich. Im Webdesign sind Animationseffekte eine der wichtigen Möglichkeiten, die Benutzererfahrung zu verbessern und die Aufmerksamkeit des Benutzers zu erregen, und Rotationsanimationen sind eine der klassischeren Methoden. In CSS können Sie das Attribut „transform“ verwenden, um verschiedene Verformungseffekte von Elementen zu erzielen, einschließlich Rotation. In diesem Artikel wird detailliert beschrieben, wie Sie mithilfe der CSS-Transformation den Rotationseffekt von Elementen erzielen, und es werden spezifische Codebeispiele bereitgestellt. 1. Verwendung von CSSs „transf
Welche Elemente werden von HTML5 nicht unterstützt?
Aug 11, 2023 pm 01:25 PM
Elemente, die HTML5 nicht unterstützt, sind rein ausdrucksstarke Elemente, rahmenbasierte Elemente, Anwendungselemente, austauschbare Elemente und alte Formularelemente. Ausführliche Einführung: 1. Rein ausdrucksstarke Elemente wie Schriftart, Mitte, S, U usw. Diese Elemente werden normalerweise zur Steuerung des Textstils und -layouts verwendet. 2. Rahmenbasierte Elemente wie Rahmen, Frameset und Noframes Elemente werden in der Vergangenheit zum Erstellen von Webseitenlayouts und geteilten Fenstern verwendet. 3. Anwendungsbezogene Elemente wie Applet, Isinde usw.
Implementierung eines Browserskripts zur Wortmarkierungsübersetzung basierend auf der ChatGPT-API
May 01, 2023 pm 03:28 PM
Vorwort Seit Kurzem gibt es auf GitHub ein Browser-Skript, das neben der Browser-Plugin auch Polier- und Zusammenfassungsfunktionen unterstützt -ins, es verwendet auch Tauri-Paketierung, abgesehen von der Tatsache, dass Tauri den Rust-Teil verwendet, ist der Browser-Teil immer noch relativ einfach zu implementieren. Heute werden wir ihn manuell implementieren. Über die von openAI bereitgestellte Schnittstelle können wir beispielsweise den folgenden Code kopieren und in der Browserkonsole eine Anfrage initiieren, um die Übersetzung abzuschließen //Beispiel constOPENAI_API_KEY="s
Was ist das Div-Box-Modell?
Oct 09, 2023 pm 05:15 PM
Das div-Box-Modell ist ein Modell, das für das Webseiten-Layout verwendet wird. Es behandelt Elemente auf einer Webseite als rechteckige Boxen. Dieses Modell enthält vier Teile: Inhaltsbereich, Innenabstand, Rand und Rand. Der Vorteil des Div-Box-Modells besteht darin, dass es das Layout der Webseite und den Abstand zwischen Elementen leicht steuern kann. Durch Anpassen der Größe des Inhaltsbereichs, des Innenrands, des Rands und des Außenrands können verschiedene Layouteffekte erzielt werden Das Box-Modell bietet außerdem einige Eigenschaften und Methoden, mit denen der Stil und das Verhalten der Box über CSS und JavaScript dynamisch geändert werden können.
So entfernen Sie Elemente mit jquery
Feb 17, 2023 am 09:49 AM
So entfernen Sie Elemente mit jQuery: 1. Löschen Sie das ausgewählte Element und seine Unterelemente über die jQuery-Methode „remove()“. Die Syntax lautet „$(“#div1“).remove();“; empty()-Methode. Die untergeordneten Elemente des ausgewählten Elements, die Syntax ist „$(“#div1“).empty();“.
