Bootstrap-Mittelüberschrift

89

Es ist meine erste Twitter Bootstrap Erfahrung. Ich habe einige Überschriften hinzugefügt (h1, h2 usw.) und sie sind links ausgerichtet. Was ist der richtige Weg, um Überschriften zu zentrieren?

twitter-bootstrap SiberianGuy
quelle
Wie enthalten Sie die Überschriften? In einem Container, wie ein pEtikett oder lose?
Andres Ilich
@AndresIlich, innerhalb der Reihenflüssigkeit (die innerhalb der Behälterflüssigkeit ist)
SiberianGuy
Möchten Sie alle Überschriften zentrieren? oder nur einige wenige?
Andres Ilich
@AndresIlich, ich möchte, dass alle Überschriften standardmäßig zentriert sind
SiberianGuy

Antworten:

137 
.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

bootstrap hat drei CSS-Klassen für die Textausrichtung hinzugefügt.

Jinpu Hu
quelle
67

Verwenden Sie einfach class = 'text-center' im Element für die Mittenüberschrift.

<h2 class="text-center">sample center heading</h2>

Verwenden Sie class = 'text-left' im Element für die linke Überschrift und class = 'text-right' im Element für die rechte Überschrift.

Sadegh-Khan
quelle
26

Verwenden Sie einfach "justify-content-center" im Klassenattribut der Zeile.

<div class="container">
  <div class="row justify-content-center">
    <h1>This is a header</h1>
  </div>
</div>
Jufrench
quelle
1
Warum all diese Komplexität? Ist das nicht <h1 class="text-center">einfacher, wie es die Antwort von Sadegh-khan sagt ?
Marco Sulla
11

Um alle Überschriften zu zentrieren, müssen Sie gemäß Ihren Kommentaren nur alle gleichzeitig hinzufügen text-align:center, wie folgt :

CSS

    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }
Andres Ilich
quelle
Die Idee hinter der Verwendung von Twitter-Bootstrap besteht zwar darin, die vorhandenen Klassen so weit wie möglich zu verwenden. Siehe die Antwort von Jinpu Hu
Skurpi
@ Kurpi Frameworks dienen als Vorschläge für die Verwendung in einem Projekt. Sie sind keineswegs selbstverständlich. Es ist zwar einfacher, die bereits im Bootstrap angegebenen Klassen und Stile zu verwenden, aber wenn die Anforderungen Ihres Projekts erfordern, dass Sie gemäß der OP-Frage einige drastische Änderungen am Framework vornehmen, besteht der einfachste Weg darin, diese Änderungen einfach unter zu ändern die Wurzelebene. Im Gegensatz zum Hinzufügen einer Tonne Klassen, die Sie wirklich nicht brauchen.
Andres Ilich
@Skurpi Außerdem waren diese Ausrichtungsklassen zum Zeitpunkt des Schreibens noch nicht vorhanden . Diese Antwort ist ein Jahr alt.
Andres Ilich
Ilich Sie haben Recht, haben nicht auf das Datum dieser Frage
geschaut,
5

Bootstrap enthält viele Pre-Build-Klassen, eine davon ist class="text-left". Bitte rufen Sie diese Klasse bei Bedarf an. :-)

Tinsae
quelle