Wie zentriere ich Text (horizontal und vertikal) innerhalb eines Div-Blocks?-HTML-Tutorial-php.cn

Wie zentriere ich Text (horizontal und vertikal) innerhalb eines Div-Blocks?

王林

Freigeben： 2023-09-09 11:29:07

nach vorne

889 Leute haben es durchsucht

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>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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!