Heim >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?
- 王林nach vorne
- 2023-09-09 11:29:07912Durchsuche
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>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>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>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>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!