Was Sie wissen sollten
- Verwenden Sie zum Zentrieren von Text den folgenden Code ("[/]" steht für einen Zeilenumbruch): .center { [/] text-align: center; [/] }.
- Inhaltsblöcke mit dem folgenden Code zentrieren ("[/]" steht für einen Zeilenumbruch): .center { [/] Rand: auto; [/] Breite: 80em; [/] }.
- So zentrieren Sie ein Bild ("[/]" bezeichnet einen Zeilenumbruch): img.center { [/] Anzeige: Block; [/] Rand-links: auto; [/] Rand-rechts: auto; [/] }.
CSS ist der beste Weg, um Elemente zu zentrieren, aber es kann für angehende Webdesigner eine Herausforderung sein, da es so viele Möglichkeiten gibt, dies zu erreichen. In diesem Artikel wird erläutert, wie Sie mit CSS Text, Textblöcke und Bilder zentrieren.
Zentrieren von Text mit CSS
Sie müssen nur eine Stileigenschaft kennen, um Text auf einer Seite zu zentrieren:
.Center {
Textausrichtung: Mitte;
}
Mit dieser CSS-Zeile wird jeder mit der Klasse .center geschriebene Absatz horizontal innerhalb seines übergeordneten Elements zentriert. Beispielsweise wird ein Absatz innerhalb einer Abteilung (ein untergeordneter Abschnitt dieser Abteilung) horizontal innerhalb der zentriert.
Hier ist ein Beispiel für diese Klasse, die im HTML-Dokument angewendet wird:
Dieser Text ist zentriert.
Denken Sie beim Zentrieren von Text mit der Eigenschaft text-align daran, dass er innerhalb des umgebenden Elements zentriert wird und nicht unbedingt innerhalb der gesamten Seite selbst.
Lesbarkeit ist immer der Schlüssel, wenn es um Website-Texte geht. Groß Blöcke mit zentriertem Text kann schwer zu lesen sein, verwenden Sie diesen Stil also sparsam. Überschriften und kleine Textblöcke, wie zum Beispiel Teaser-Texte für einen Artikel, sind in der Regel gut lesbar, wenn sie zentriert sind. größere Textblöcke, wie z. B. ein vollständiger Artikel, wären jedoch schwierig zu konsumieren, wenn sie vollständig mittig ausgerichtet wären.
Zentrieren von Inhaltsblöcken mit CSS
Inhaltsblöcke werden mithilfe von HTML erstellt.
.Center {
Rand: automatisch;
Breite: 80em;
}
Diese CSS-Kurzform für die Eigenschaft margin würde den oberen und unteren Rand auf den Wert 0 setzen, während links und rechts "auto" verwenden würden. Diese nimmt im Wesentlichen jeden verfügbaren Platz ein und teilt ihn gleichmäßig auf die beiden Seiten des Ansichtsfensters auf, wodurch das Element effektiv zentriert wird die Seite.
Hier wird es im HTML angewendet:
Dieser gesamte Block ist zentriert,aber der Text darin ist linksbündig.
Solange Ihr Block eine definierte Breite hat, zentriert er sich innerhalb des enthaltenden Elements. Der in diesem Block enthaltene Text wird darin nicht zentriert, sondern linksbündig ausgerichtet. Dies liegt daran, dass Text in Webbrowsern standardmäßig linksbündig ausgerichtet ist. Wenn der Text ebenfalls zentriert werden soll, können Sie die zuvor behandelte Eigenschaft text-align in Verbindung mit dieser Methode verwenden, um die Teilung zu zentrieren.
Zentrieren von Bildern mit CSS
Obwohl die meisten Browser Bilder mit derselben text-align-Eigenschaft zentriert anzeigen, wird dies vom W3C nicht empfohlen. Daher besteht immer die Möglichkeit, dass zukünftige Browserversionen diese Methode ignorieren.
Anstatt ein Bild mit text-align zu zentrieren, sollten Sie dem Browser explizit mitteilen, dass es sich bei dem Bild um ein Element auf Blockebene handelt. Auf diese Weise können Sie ihn wie jeden anderen Block zentrieren. Hier ist das CSS, um dies zu ermöglichen:
img.center {
Bildschirmsperre;
Rand-links: auto;
Rand-rechts: auto;
}
Und hier ist der HTML-Code für das Bild, das zentriert werden soll:
Sie können Objekte auch mithilfe von Inline-CSS zentrieren (siehe unten). Dieser Ansatz wird jedoch nicht empfohlen, da er Ihrem HTML-Markup visuelle Stile hinzufügt. Denken Sie daran, dass Stil und Struktur getrennt sein sollten; Durch das Hinzufügen von CSS-Stilen zu HTML wird diese Trennung aufgehoben, und Sie sollten sie daher nach Möglichkeit vermeiden.
Vertikales Zentrieren von Elementen mit CSS
Das vertikale Zentrieren von Objekten war im Webdesign schon immer eine Herausforderung, aber die Veröffentlichung der CSS flexibles Box-Layout-Modul in CSS3 bietet eine Möglichkeit, dies zu tun.
Die vertikale Ausrichtung funktioniert ähnlich wie die oben beschriebene horizontale Ausrichtung. Die CSS-Eigenschaft ist vertikal ausgerichtet, wie folgt:
.vcenter {
vertikal ausrichten: Mitte;
}
Alle modernen Browser diesen CSS-Stil unterstützen. Bei Problemen mit älteren Browsern empfiehlt das W3C, den Text vertikal in einem Container zu zentrieren. Platzieren Sie dazu die Elemente in einem umschließenden Element, z. B. a div, und stellen Sie eine Mindesthöhe ein. Deklarieren Sie das enthaltende Element als Tabellenzelle und setzen Sie die vertikale Ausrichtung auf "Mitte".
Hier zum Beispiel das CSS:
.vcenter {
Mindesthöhe: 12em;
Anzeige: Tabellenzelle;
vertikal ausrichten: Mitte;
}
Und hier ist der HTML-Code:
Dieser Text wird vertikal in der Box zentriert.
Verwenden Sie das HTML-Element nicht zum Zentrieren von Bildern und Text; Es ist veraltet und wird von modernen Webbrowsern nicht mehr unterstützt. Dies ist zum großen Teil eine Reaktion auf die klare Trennung von Struktur und Stil in HTML5: HTML schafft Struktur und CSS gibt den Stil vor. Da die Zentrierung ein visuelles Merkmal eines Elements ist (wie es aussieht und nicht wie es ist), wird dieser Stil mit CSS und nicht mit HTML behandelt. Verwenden Sie stattdessen CSS, damit Ihre Seiten richtig angezeigt werden und modernen Standards entsprechen.
Vertikale Zentrierung und ältere Versionen von Internet Explorer
Sie können das Zentrieren von Internet Explorer (IE) erzwingen und dann bedingte Kommentare verwenden, damit nur der IE die Stile sieht, sie jedoch etwas ausführlich und unattraktiv sind. Die Entscheidung von Microsoft aus dem Jahr 2015, den Support für einzustellen ältere Versionen von IE, wird dies jedoch zu keinem Problem machen, wenn der IE nicht mehr verwendet wird.