Wie nach links, rechts, Mitte ausrichten mit CSS

April 12

Anstelle von HTML-Ausrichtung-Attribute mit den HTML-Tags ist dieser Markuptext, die bewährte für Webdesigner, die Präsentation (Ausrichtungsoptionen) Informationen zum Stylesheet verschieben. Dieser Artikel soll erklären, wie, um Text auszurichten und zum größeren Seitenelemente wie Divs zentrieren.

Anweisungen

Gewusst wie: Ausrichten von Text

1 Um Text innerhalb eines normalen Blocks z. B. einen Absatz oder eine Blockquote auszurichten, verwenden Sie die Text-align-Eigenschaft.

2Wie nach links, rechts, Mitte ausrichten mit CSS

Die Wert-Auswahlmöglichkeiten für die Test-align-Eigenschaft sind Links, rechts, Mitte und rechtfertigen. Da Blocksatz nicht im Web sehr gut lesbar ist, zeigt die Abbildung nur Links, rechts und Mitte. In dieser Abbildung hat jeder Absatz einen schwarzen Rand um die Größe des Block-Element auf der Seite zu demonstrieren, wenn keine Breite festlegen auf das Element angewendet wird.

3 Normalerweise wird ein Element eine Id oder Klasse zugewiesen. Die Textausrichtung von alle Elemente in die Id oder Klasse wird mit einer Regel wie eine dieser festgelegt:

linken {} text-align: left;

}

richtige {} text-align: right;

}

Zentrum {} text-align: center;

}

Wie Divs, Wrapper-div-Tags und Body Center

4 Vielleicht möchten ein gesamtes Layout oder eine große Abteilung eines Layouts zu zentrieren. In solchen Fällen verwenden Sie eine andere CSS-Technik.

5 Die CSS-Regel auf die größeren Elementauswahl zentriert gewünschte angewendet. Es könnte sein das Body-Element, eine Wrapper-Div oder ein Container-div.

6 Zentrierung von dieser Methode wirkt sich nicht auf Textausrichtung aus. Das Element zentrierte behalten die linken Standardausrichtung von Text innerhalb des Elements zentriert.

7Wie nach links, rechts, Mitte ausrichten mit CSS

Im folgenden finden eine Abbildung des gesamten Körpers Elementes (mit einem schwarzen Rahmen zur Klarstellung) zentriert auf einer Seite. Eine Breite für das Element festgelegt werden muss, dann sind die linken und rechten Rand auf auto festgelegt. Hier ist wie:

Körper {}

width: 80%; margin-right: auto; margin-left: auto; border: 1px solid black;

}

Tipps & Warnungen

  • Normalerweise ist es nicht notwendig, linksbündig zu verwenden, da die linksbündige Ausrichtung die Standardeinstellung ist. Allerdings müssen Sie darauf achten, dass es vorhanden ist, für den Fall, dass musst du vorher zentriert oder rechtsbündig Text Zurücksetzen auf den Standardwert in der Nachnutzung.
  • Die Breite des Elements zentriert werden kann in Pixel, Prozentwerte oder Ems festgelegt werden.