Web-Frontend
HTML-Tutorial
Wie zentriere ich Text (horizontal und vertikal) innerhalb eines Div-Blocks?
Wie zentriere ich Text (horizontal und vertikal) innerhalb eines Div-Blocks?
Wir können Text problemlos horizontal und vertikal innerhalb eines Div zentrieren. Schauen wir uns das einzeln an.
Verwenden Sie die text-align-Eigenschaft, um den Text in einem Div horizontal zu zentrieren
Um Text in einem Div horizontal zu zentrieren, verwenden Sie die Eigenschaft text-align. Das text-align-Attribut bestimmt die Ausrichtung von Zeilenfeldern innerhalb von Elementen auf Blockebene. Hier sind die möglichen Werte -
left – Der linke Rand jedes Zeilenfelds wird am linken Rand des Inhaltsbereichs des Elements auf Blockebene ausgerichtet.
right – Der rechte Rand jedes Zeilenfelds ist am rechten Rand des Inhaltsbereichs des Elements auf Blockebene ausgerichtet.
center – Die Mitte jedes Zeilenfelds ist an der Mitte des Inhaltsbereichs des Elements auf Blockebene ausgerichtet.
justify – Der Rand jedes Zeilenfelds sollte am Rand des Inhaltsbereichs des Elements auf Blockebene ausgerichtet sein.
String – Der Inhalt der Zellen in der Spalte wird an der angegebenen Zeichenfolge ausgerichtet.
Beispiel
Jetzt zentrieren wir den Text im Div horizontal mit der text-align-Eigenschaft -
<!DOCTYPE html>
<html>
<head>
<title>Align Horizontally</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
text-align: center;
}
</style>
</head>
<body>
<h1 id="Software-Quality-Management">Software Quality Management</h1>
<p>Software Quality Management ensures the required level of software quality is achieved.
</p>
<div class="demo">
<p>This text in div is centered horizontally.</p>
</div>
</body>
</html>
Verwenden Sie die Eigenschaft „justify-content“, um Text in einem Div horizontal zu zentrieren
Beispiel
Um Text in einem Div horizontal zu zentrieren, verwenden Sie die Eigenschaft „justify-content“. Sehen wir uns nun ein Beispiel an
<!DOCTYPE html>
<html>
<head>
<title>Align Horizontally</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<h1 id="Software-Quality-Management">Software Quality Management</h1>
<p>Software Quality Management ensures the required level of software quality is achieved.
</p>
<div class="demo">
<p>This text in div is centered horizontally.</p>
</div>
</body>
</html>
Verwenden Sie die Padding-Eigenschaft, um Text in Div vertikal zu zentrieren
Um Text in einem Div vertikal zu zentrieren, verwenden Sie die padding-Eigenschaft. Mit der padding-Eigenschaft können Sie angeben, wie viel Platz zwischen dem Inhalt eines Elements und seinem Rand bleiben soll. Die folgenden CSS-Eigenschaften können zur Steuerung von Listen verwendet werden. Mithilfe der folgenden Eigenschaften können Sie auch unterschiedliche Werte für die Polsterung auf jeder Seite der Box festlegen -
- padding-bottom Gibt die untere Polsterung des Elements an.
- padding-top Gibt die obere Polsterung des Elements an.
- padding-left Gibt den linken Abstand des Elements an.
- padding-right Gibt die richtige Polsterung des Elements an.
- padding wird als Abkürzung für die oben genannten Eigenschaften verwendet.
Beispiel
Sehen wir uns nun ein Beispiel für die vertikale Zentrierung von Text in einem Div mithilfe der Padding-Eigenschaft an -
<!DOCTYPE html>
<html>
<head>
<title>Align Vertically</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
padding: 50px 0;
}
</style>
</head>
<body>
<h1 id="Software-Quality-Management">Software Quality Management</h1>
<p>Software Quality Management ensures the required level of software quality is achieved.
</p>
<div class="demo">
<p>This text in div is centered vertically.</p>
</div>
</body>
</html>
Verwenden Sie die Eigenschaft line-height, um Text in einem Div vertikal zu zentrieren
Um Text in einem Div vertikal zu zentrieren, verwenden Sie die Eigenschaft „line-height“. Die Eigenschaft line-height ändert die Höhe der Inline-Boxen, aus denen eine Textzeile besteht.
Das Folgende sind die möglichen Werte -
Normal – Weist den Browser an, die Zeilenhöhe innerhalb des Elements auf einen „angemessenen“ Abstand festzulegen.
Nummer – Die tatsächliche Höhe der Zeile 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 der Zeilen innerhalb eines Elements wird als Prozentsatz der Schriftgröße des Elements berechnet.
Beispiel
Sehen wir uns nun ein Beispiel für die vertikale Zentrierung von Text in einem Div mithilfe der Eigenschaft „line-height“ an -
<!DOCTYPE html>
<html>
<head>
<title>Align Vertically</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
line-height: 150px;
height: 200px;
}
</style>
</head>
<body>
<h1 id="Software-Quality-Management">Software Quality Management</h1>
<p>Software Quality Management is a process that ensures the required level of software
quality is achieved.</p>
<div class="demo">
<p> This text in div is centered vertically.</p>
</div>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie zentriere ich Text (horizontal und vertikal) innerhalb eines Div-Blocks?. 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
So zentrieren Sie Bilder in HTML-Webseiten
Apr 05, 2024 pm 12:18 PM
In HTML gibt es zwei Möglichkeiten, ein Bild zentriert auszurichten: Verwenden Sie CSS: margin: 0 auto, um das Bild horizontal zu zentrieren, und display: block, damit es die gesamte Breite einnimmt. Verwenden Sie das HTML: <center>-Element, um das Bild horizontal zu zentrieren, aber es ist weniger flexibel und entspricht nicht den neuesten Webstandards.
So passen Sie die Textposition in Dreamweaver an
Apr 09, 2024 am 02:24 AM
Das Anpassen der Textposition in Dreamweaver kann durch die folgenden Schritte durchgeführt werden: Wählen Sie den Text aus und nehmen Sie mit dem Textpositionsregler horizontale Anpassungen vor: linke Ausrichtung, rechte Ausrichtung, mittlere Ausrichtung. 2. Nehmen Sie vertikale Anpassungen vor: obere Ausrichtung, untere Ausrichtung, vertikal 3. Drücken Sie die Umschalttaste und verwenden Sie die Pfeiltasten, um die Position zu verfeinern. 4. Verwenden Sie die Tastenkombinationen zur schnellen Ausrichtung: linke Ausrichtung (Strg/Befehl + L), rechte Ausrichtung (Strg/Befehl + R), zentrierte Ausrichtung (Strg/Befehlstaste + C).
So zentrieren Sie das Textfeld in HTML
Apr 22, 2024 am 10:33 AM
Es gibt viele Möglichkeiten, das HTML-Textfeld zu zentrieren: Texteingabefeld: Verwenden Sie den CSS-Code input[type="text"] { text-align: center } text area: verwenden Sie den CSS-Code textarea { text-align: center; } Horizontale Zentrierung: Verwenden Sie den Text-Align: Center-Stil für das übergeordnete Element des Textfelds, um es vertikal zu zentrieren: Verwenden Sie das Vertical-Align-Attribut input[type="text"] { Vertical-Align: Middle }Flexbox: Verwenden Sie Display:
So zentrieren Sie UL-Inhalte in CSS
Apr 26, 2024 pm 12:24 PM
Zentrieren Sie UL-Inhalte in CSS: Verwenden Sie die text-align-Eigenschaft: Legen Sie die Ausrichtung von Text fest, einschließlich des Inhalts von Listenelementen. Verwenden Sie das Margin-Attribut: Legen Sie den linken und rechten Rand des Elements fest und verwenden Sie margin: auto, um eine horizontale Zentrierung zu erreichen. Verwenden Sie das Anzeigeattribut: Setzen Sie das Element auf inline-block und zentrieren Sie es dann vertikal mit text-align: center. Verwenden Sie Flexbox-Eigenschaften: Horizontale und vertikale Zentrierung durch justify-content: center und align-items: center.
Leitfaden zum Beheben von Fehlausrichtungen von WordPress-Webseiten
Mar 05, 2024 pm 01:12 PM
Leitfaden zum Beheben falsch ausgerichteter WordPress-Webseiten. Bei der Entwicklung von WordPress-Websites stoßen wir manchmal auf falsch ausgerichtete Webseitenelemente. Dies kann an Bildschirmgrößen auf verschiedenen Geräten, Browserkompatibilität oder falschen CSS-Stileinstellungen liegen. Um diese Fehlausrichtung zu beheben, müssen wir das Problem sorgfältig analysieren, mögliche Ursachen finden und es Schritt für Schritt debuggen und reparieren. In diesem Artikel werden einige häufig auftretende Probleme mit der Fehlausrichtung von WordPress-Webseiten sowie entsprechende Lösungen vorgestellt und spezifische Codebeispiele bereitgestellt, die bei der Entwicklung helfen
Analyse und Lösungen für die Ursachen falsch ausgerichteter Typografie in WordPress
Mar 05, 2024 am 11:45 AM
Analyse der Ursachen und Lösungen für falsch ausgerichtete Typografie in WordPress Beim Erstellen einer Website mit WordPress kann es zu falsch ausgerichteter Typografie kommen, die sich auf die Gesamtschönheit und das Benutzererlebnis der Website auswirkt. Es gibt viele Gründe für eine Fehlausrichtung der Typografie, die durch Themenkompatibilitätsprobleme, Plug-in-Konflikte, CSS-Stilkonflikte usw. verursacht werden kann. In diesem Artikel werden häufige Ursachen für falsch ausgerichtete Typografie in WordPress analysiert und einige Lösungen bereitgestellt, einschließlich spezifischer Codebeispiele. 1. Gründe für Kompatibilitätsprobleme mit Themes: Einige WordPress
So zentrieren Sie die Schriftart in Sublime
Apr 03, 2024 am 10:21 AM
Zu den Methoden zum Ausrichten von Text in Sublime Text gehören: Verwenden von Tastenkombinationen (Absatz: Strg + Alt + C, einzelne Zeile: Strg + Alt + E), Verwenden der Option „Ausrichten“ in der Menüleiste und Installieren von Ausrichtungs-Plug-ins (z B. AlignTab, Alignment Plugin) oder manuelle Ausrichtung (zentriert: füllt Leerzeichen, ausgerichtet: erstellt Ränder).
So zentrieren Sie den Frame in HTML
Apr 22, 2024 am 10:45 AM
Es gibt vier Möglichkeiten, den HTML-Rahmen zu zentrieren: margin: 0 auto;: Zentriert den Rahmen horizontal. text-align: center;: Zentriert den Rahmeninhalt horizontal. display: flex; align-items: center;: Zentrieren Sie den Rahmen vertikal. Position: absolut; oben: 50 %; transform: Translate(-50 %, -50 %);: Verwendet CSS-Transformationen, um den Rahmen in der Mitte des Containers mit fester Größe zu positionieren.
