Wie zentriere ich Inhalte in Twitter Bootstrap?

So zentrieren Sie Inhalte mit Twitter Bootstrap

In Twitter Bootstrap können Sie zentrierte Inhalte durch Methoden erreichen, die je nach Ihren spezifischen Anforderungen variieren.

Text zentrieren

Um Text in der Mitte auszurichten, müssen Sie kann die .text-center-Klasse auf den übergeordneten Container anwenden. Diese in Bootstrap 2.3.0 eingeführte Klasse ermöglicht eine mühelose Textzentrierung.

<div class="text-center">
  <h1>Bootstrap Starter Template</h1>
  <p>Example text.</p>
</div>

Hinweise:

• Für Textausrichtungsoptionen in älteren Versionen von Bootstrap (vor 2.3.0) können Sie text-align: center zur .row oder .span12 hinzufügen Container.

Alternative Methoden für Nicht-Text-Inhalte

Um Nicht-Text-Elemente (z. B. Bilder oder Schaltflächen) zu zentrieren, haben Sie folgende Möglichkeiten:

• Margin: Füge margin: 0 automatisch zum Element hinzu, wodurch gleiche Ränder erstellt werden beide Seiten.
• Float: Float: none festlegen und dann margin: 0 auto zum übergeordneten Container hinzufügen.
• Bootstrap Utility Classes: Utilize die Klassen .pull-left, .pull-right und .center-block.
• Benutzerdefiniert Stile: Definieren Sie die Zentrierungsregeln in Ihrem eigenen benutzerdefinierten Stylesheet.

Wählen Sie die Methode, die Ihren spezifischen Anforderungen und Ihrer Bootstrap-Version am besten entspricht.

Das obige ist der detaillierte Inhalt vonWie zentriere ich Inhalte in Twitter Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!