Wie steuern Sie die Textausrichtung mithilfe der Eigenschaft von Text-Align-Eigenschaften?

Wie steuern Sie die Textausrichtung mithilfe der Eigenschaft von Text-Align-Eigenschaften?

Die text-align Eigenschaft in CSS wird verwendet, um die Ausrichtung des Textes innerhalb eines Elements zu steuern. Diese Eigenschaft kann auf Blockebene wie <div> , <code><p></p> oder <h1></h1> auf <h6></h6> angewendet werden, um die Ausrichtung des Textes innerhalb dieser Elemente zu ändern. Um die Eigenschaft von text-align zu verwenden, geben Sie sie in einer CSS-Regel an und setzen Sie sie auf einen seiner verfügbaren Werte ein. Um den Text in einem <p></p> -Element zu zentrieren, können Sie die folgende CSS -Regel verwenden:

 <code class="css">p { text-align: center; }</code>

Diese Regel würde den Text aller <p></p> Elemente auf der Seite zentrieren. Sie können die text-align Eigenschaft auf ein bestimmtes Element anwenden, indem Sie eine ID oder einen Klassenauswahl verwenden, oder auf mehrere Elemente, indem Sie einen Element-Selektor verwenden, wie oben gezeigt.

Was sind die verschiedenen Werte, die mit der Eigenschaft von Text-Align-Eigenschaften verwendet werden können?

Die text-align Eigenschaft akzeptiert mehrere Werte, die bestimmen, wie der Text innerhalb eines Elements ausgerichtet ist. Die am häufigsten verwendeten Werte sind:

• Links : Richtig den Text auf die linke Kante des Elements. Dies ist die Standardausrichtung für die meisten Sprachen, die von links nach rechts gelesen werden.
• Rechts : Richtig den Text auf die rechte Kante des Elements.
• Zentrum : Zentriert den Text innerhalb des Elements.
• Rechtfertigung : Streckt die Textlinien so, dass sie sowohl die linken als auch die rechten Kanten innerhalb des Elements ausrichten. Dies kann manchmal zu einem ungleichmäßigen Abstand zwischen Wörtern führen.

Darüber hinaus akzeptiert die text-align Eigenschaft auch die folgenden weniger gemeinsamen Werte:

• Start : Übereinstimmt den Text auf die Startkante des Elements, die nach left nach links und right für Sprachen von rechts nach links entspricht.
• Ende : Übereinstimmt den Text auf die Endkante des Elements, das für Sprachen von right nach rechts und nach left nach rechts entspricht.

Wie wirkt sich die Eigenschaft von Text-Align-Eigenschaften auf das Textlayout in verschiedenen HTML-Elementen aus?

Die text-align -Eigenschaft beeinflusst das Textlayout in HTML-Elementen auf Blockebene, indem die horizontale Position der Textzeilen relativ zu den Kanten des Inhaltsfelds des Elements angepasst wird. Zum Beispiel:

• Wenn der Text auf ein <p></p> Element mit text-align: left angewendet wird, richtet sich der Text entlang der linken Kante des Absatzes aus, sodass die rechte Seite möglicherweise uneben ist.
• Wenn text-align: right verwendet wird, richtet sich der Text entlang der rechten Kante aus, sodass die linke Seite möglicherweise ungleichmäßig ist.
• Verwenden von text-align: center positioniert den Text so, dass sich auf der linken und rechten Seite des Textblocks innerhalb des Elements eine gleiche Menge an Platz befindet.
• Wenn text-align: justify festgelegt wird, versucht der Browser, den Abstand zwischen Wörtern so anzupassen, dass jede Textzeile innerhalb des Elements die volle Breite des Elements ausfüllt, mit Ausnahme der letzten Zeile, die typischerweise standardmäßig links ausgerichtet ist.

Die Auswirkungen von text-align sind auf Text- und Inline-Elemente innerhalb des Elements auf Blockebene beschränkt, auf das es angewendet wird. Es wirkt sich nicht auf die Positionierung von Elementen auf Blockebene oder absolut positionierte Elemente innerhalb des Blocks aus.

Kann die Eigenschaft von Text-Align-Eigenschaft verwendet werden, um Text sowohl in horizontaler als auch in vertikalen Richtungen auszurichten?

Die text-align -Eigenschaft wurde speziell entwickelt, um die horizontale Ausrichtung des Textes innerhalb eines Elements zu steuern. Es hat keinen Einfluss auf die vertikale Ausrichtung des Textes. Für die vertikale Ausrichtung müssen andere CSS -Eigenschaften verwendet werden.

Um die vertikale Ausrichtung des Textes zu erreichen, können Sie Eigenschaften wie line-height für Einzelzeilentextelemente oder Flexbox-Eigenschaften wie align-items und justify-content bei der Verwendung eines Flex-Containers verwenden. Zum Beispiel können Sie verwenden, um den Text in einer <div> mit Flexbox vertikal zu zentrieren, dass Sie verwenden können:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;css&quot;&gt;div { display: flex; align-items: center; justify-content: center; height: 200px; /* Height must be set for vertical alignment to work */ }&lt;/code&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Obwohl <code>text-align für die Verwaltung des horizontalen Textes leistungsfähig ist, sind andere CSS-Techniken für die vertikale Ausrichtung erforderlich.