Bootstrap Center

Das Bootstrap -Framework ist ein leistungsstarkes Tool zum Entwerfen von Websites. Es bietet viele Klassen mit vordefinierten Stilen. Insbesondere kann der Text in Bootstrap mit der “gerechtfertigt werdentext-Gereinigung"Klasse, und um die Elemente rechts, links und in der Mitte auszurichten", "Textrechnung","Text-Links", Und "Text-Center”Klassen werden genutzt. Die flexiblen Elemente können auch links, rechts oder in der Mitte mit den spezifischen Klassen ausgerichtet werden.

Diese Beschreibung wird Sie führen:

• So zentrieren Sie den Text horizontal mit Bootstrap?
• So zentrieren Sie eine Spalte horizontal mit Bootstrap?
• So zentrieren Sie ein Bild horizontal mit Bootstrap?

So zentrieren Sie den Text horizontal mit Bootstrap?

In Bootstrap kann der Text mit dem „mit dem“ gerechtfertigt werdenText-Links","Textrechnung", Und "Text-Center" Klassen. Der "Text-CenterDie Klasse wird am häufigsten verwendet, um die Elemente horizontal zu zentrieren.

Beispiel

Das folgende Beispiel zeigt, wie der Text horizontal mit Bootstrap zentriert wird:

• Füge hinzu ein "Element und zuweisen Sie die Klasse als "als"Text-Center”.
• Fügen Sie in dieser Klasse das hinzu “

  Element, um einen Textinhalt anzugeben.

Html

Willkommen bei LinuxHint!

Es kann beobachtet werden, dass der Text jetzt eine horizontale Zentrumausrichtung hat:

So zentrieren Sie eine Spalte horizontal mit Bootstrap?

Das Raster in Bootstrap umfasst Zeilen und Spalten. Der "Reihe"Klasse erstellt eine Reihe und die"col”Definiert die Spalte.

Beispiel

Für die praktische Demonstration finden Sie das unten erwähnte Beispiel:

• Füge hinzu ein ""Element und weisen Sie ihm eine Klasse" Zeile "," D-Flex "und" Justify-Content-Center "zu.
• “D-Flex”Macht den Display des Elements Flex.
• “Rechtfertigungs-in-Center”Horizontal Center stimmt die Elemente aus.
• “col-4Die Klasse wird verwendet, um die Spalte anzupassen:

Zentrierte Säule

Ausgang

So zentrieren Sie ein Bild horizontal mit Bootstrap?

Das Bildelement kann mithilfe der “ausgerichtet werdenD-Flex" Und "Rechtfertigungs-in-Center”.

Beispiel

In diesem Beispiel folgt das Bild, indem sie den Schritten folgen:

• Zuerst fügen Sie eine "hinzu"Element und zuweisen Sie es "das"D-Flex" Und "Rechtfertigungs-in-Center" Klassen.
• Fügen Sie im erstellten Container einen weiteren hinzu “"Mit der Klasse"Karte”.
• Geben Sie innerhalb des Containers „Karten“ den „Kartenkörper“ als Klassennamen an.
• Umfassen die "Tag, um ein Bild mit dem "hinzuzufügen"src","Alt", Und "Breite”Attribute zur Angabe der Quelle des hinzugefügten Bildes, des alternativen Textes und der Standardbreite.

Html

Ausgang

Hier geht es darum, die Elemente in Bootstrap horizontal zu zentrieren.

Abschluss

Um die Elemente horizontal zu zentrieren, hauptsächlich die “Text-Center”Klasse wird verwendet. Die Elemente können mit der “flexibel gemacht werdenD-Flex" Klasse. Die flexiblen Gegenstände können mit der “ausgerichtet werdenRechtfertigungs-in-Center" Klasse. Dieser Beitrag hat die Methoden erklärt, um mehrere Elemente horizontal auszurichten.