Heim > Artikel > Web-Frontend > Wie kann ich Text in CSS so ausrichten, dass beide Spalten gerade bleiben?

Wie kann ich Text in CSS so ausrichten, dass beide Spalten gerade bleiben?

王林nach vorne: 2023-09-15 16:45:03890Durchsuche

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, mit der das Erscheinungsbild und die Formatierung von HTML-Dokumenten festgelegt werden. Indem CSS die Darstellung von Inhalten von der Struktur der Webseite entkoppelt, ermöglicht es Ihnen, das Layout, die Farben, Schriftarten und andere Stile Ihrer Website zu steuern.

Sie können die display:table-Eigenschaft von CSS verwenden, um eine tabellenartige Struktur zu erstellen, um beide Spalten gerade auszurichten, wenn Sie Text in CSS ausrichten. Wenn Sie dann das Attribut „display: table-cell“ verwenden, legen Sie „top“ oder „bottom“ als Vertical-Align-Attribut für jede Spalte fest, um den Text entsprechend auszurichten.

Methode

Hier sind einige typische Methoden zum Ausrichten von Text in CSS -

Verwenden Sie Textausrichtungseigenschaften
Anzeigeattribut verwenden
Verwenden Sie Float-Eigenschaften

Lassen Sie uns nun jede Methode anhand von Beispielen im Detail verstehen.

Methode 1: Verwenden Sie das Attribut „text-align“

Die erste Möglichkeit, Text in CSS auszurichten (beide Spalten sind gerade), ist die Verwendung der Eigenschaft „text-align“. Text innerhalb eines Containerelements kann mithilfe der text-align-Eigenschaft ausgerichtet werden. Es akzeptiert Werte wie „Mitte“, „Links“ und „Ausrichten“.

Beispiel

Im folgenden Beispiel lernen wir, wie man Text in CSS mithilfe der Eigenschaft „text-align“ ausrichtet

Schritt 1 – Erstellen Sie ein Containerelement in HTML wie ein Div –

<div class="container">
   <!-- Your content goes here -->
</div>

Schritt 2 – Erstellen Sie zwei untergeordnete Elemente für die beiden Spalten innerhalb des Containerelements –

<div class="container">
   <div class="left-col">
      <!-- Left column content goes here -->
   </div>
   <div class="right-col">
      <!-- Right column content goes here -->
   </div>
</div>

Schritt 3− CSS-Stile sollten zu Container- und Spaltenelementen hinzugefügt werden −

.container {
   display: flex;
   justify-content: space-between;
}
.left-col {
   width: 49%;
   text-align: left;
}
.right-col {
   width: 49%;
   text-align: right;
}

Schritt 4 – Spaltenelemente mit Inhalt füllen –

<div class="container">
   <div class="left-col">
      <p>Left column content</p>
   </div>
   <div class="right-col">
      <p>Right column content</p>
   </div>
</div>

Schritt 5 – Sie können den in zwei geraden Spalten angeordneten Text betrachten, indem Sie eine Vorschau des Ergebnisses in Ihrem Computerbrowser anzeigen.

Schritt 6 – Der endgültige Code sieht so aus –

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .container {
         display: flex;
         justify-content: space-between;
      }
      .left-col {
         width: 49%;
         text-align: left;
      }
      .right-col {
         width: 49%;
         text-align: right;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="left-col">
         <p>Left column content</p>
      </div>
      <div class="right-col">
         <p>Right column content</p>
      </div>
   </div>
</body>
</html>

Methode 2: „Anzeigeattribut“ verwenden

Um ein flexibles Layout zu erstellen, stellen Sie die Anzeigeeigenschaft auf Flex oder Raster ein. Mit den Eigenschaften justify-content und align-items können Sie die Position von Elementen in verschiedenen Layoutmodi verwalten.

Beispiel

Im folgenden Beispiel lernen wir, wie man Text in CSS mithilfe des Anzeigeattributs ausrichtet

Schritt 1 – Erstellen Sie ein Containerelement in HTML wie ein Div –

<div class="container">
   <!-- Your content goes here -->
</div>

Schritt 2 – Erstellen Sie zwei untergeordnete Elemente für die beiden Spalten innerhalb des Containerelements –

<div class="container">
   <div class="left-col">
      <!-- Left column content goes here -->
   </div>
   <div class="right-col">
      <!-- Right column content goes here -->
   </div>
</div>

Schritt 3− CSS-Stile sollten zu Container- und Spaltenelementen hinzugefügt werden −

.container {
   display: flex;
   justify-content: space-between;
}
.left-col {
   width: 49%;
}
.right-col {
   width: 49%;
}

Schritt 4 – Spaltenelemente mit Inhalt füllen –

<div class="container">
   <div class="left-col">
      <p>Left column content</p>
   </div>
   <div class="right-col">
      <p>Right column content</p>
   </div>
</div>

Schritt 5 – Sie können den in zwei geraden Spalten angeordneten Text betrachten, indem Sie eine Vorschau des Ergebnisses in Ihrem Computerbrowser anzeigen.

Schritt 6 – Der endgültige Code sieht so aus –

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .container {
         display: flex;
         justify-content: space-between;
      }
      .left-col {
         width: 49%;
      }
      .right-col {
         width: 49%;
         text-align: right;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="left-col">
         <p>Left column content</p>
      </div>
      <div class="right-col">
         <p>Right column content</p>
      </div>
   </div>
</body>
</html>

Methode 3: „Float-Attribut“ verwenden

Mit dem Float-Attribut kann ein Element auf der linken oder rechten Seite seines übergeordneten Containers schweben. Damit können Sie in mehreren Spalten ausgerichteten Text erstellen, um ein mehrspaltiges Layout zu erstellen.

Beispiel

Im folgenden Beispiel lernen wir, wie man Text in CSS mithilfe der Float-Eigenschaft ausrichtet

Schritt 1 – Erstellen Sie ein Containerelement in HTML wie ein Div –

<div class="container">
   <!-- Your content goes here -->
</div>

Schritt 2 – Erstellen Sie zwei untergeordnete Elemente für die beiden Spalten innerhalb des Containerelements –

<div class="container">
   <div class="left-col">
      <!-- Left column content goes here -->
   </div>
   <div class="right-col">
      <!-- Right column content goes here -->
   </div>
</div>

Schritt 3− CSS-Stile sollten zu Container- und Spaltenelementen hinzugefügt werden −

.left-col {
   width: 49%;
   float: left;
   text-align: left;
}
.right-col {
   width: 49%;
   float: right;
   text-align: right;
}

Schritt 4 – Spaltenelemente mit Inhalt füllen –

<div class="container">
   <div class="left-col">
      <p>Left column content</p>
   </div>
   <div class="right-col">
      <p>Right column content</p>
   </div>
</div>

Schritt 5 – Sie können den in zwei geraden Spalten angeordneten Text betrachten, indem Sie eine Vorschau des Ergebnisses in Ihrem Computerbrowser anzeigen.

Schritt 6 – Der endgültige Code sieht so aus –

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      .left-col {
         width: 49%;
         float: left;
         text-align: left;
      }
      .right-col {
         width: 49%;
         float: right;
         text-align: right;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="left-col">
         <p>Left column content</p>
      </div>
      <div class="right-col">
         <p>Right column content</p>
      </div>
   </div>
</body>
</html>

Fazit

Sowohl das text-align-Attribut als auch das display-Attribut in CSS können Text in zwei aufrechten Spalten ausrichten. Das Anzeigeattribut gibt das Layout des Elements an, z. B. ob es als Blockebenenelement oder als Inline-Element angezeigt werden soll.

Das obige ist der detaillierte Inhalt vonWie kann ich Text in CSS so ausrichten, dass beide Spalten gerade bleiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html Float 样式表 display flex table

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie können wir verschiedene CSS-Klassen in HTML verwenden?Nächster Artikel：Wie können wir verschiedene CSS-Klassen in HTML verwenden?

In Verbindung stehende Artikel

Mehr sehen