Ich verwende das Bootstrap-Framework und versuche, ein Bild ohne Erfolg horizontal zu zentrieren.
Ich habe verschiedene Techniken ausprobiert, wie das Aufteilen des 12-Gitter-Systems in 3 gleiche Blöcke, z
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4"><img src="logo.png" /></div>
<div class="span4"></div>
</div>
</div>
Was ist die einfachste Methode, um ein Bild relativ zur Seite zu zentrieren?
css
twitter-bootstrap
Fixer
quelle
quelle
img-responsive
Ihrimg
Tag eine Klasse enthält , wird das Bild möglicherweise nicht zentriert. In dieser SO-Antwort finden Sie eine Erklärung, warum die Verwendung der Bootstrap-center-block
Klasse dieses Problem auf Bootstrap-Weise löst.Antworten:
Twitter Bootstrap v3.0.3 hat eine Klasse: center-block
Müssen nur eine Klasse
.center-block
in dasimg
Tag hinzufügen , sieht so ausIn Bootstrap hat bereits CSS-Stil Aufruf .center-Block
Sie können ein Beispiel von hier sehen
quelle
</div>
Tag auf demcontainer
Div scheint zu fehlen. Dies funktioniert nicht für mich auf v3.3.7Der richtige Weg dies zu tun ist
quelle
center-block
zu den<img>
Elementen funktionierte ..Update 2018
Die
center-block
Klasse ist in Bootstrap 4 nicht mehr vorhanden . Verwenden Siemx-auto d-block
... , um ein Bild in Bootstrap 4 zu zentrieren.quelle
Fügen Sie dem Bild als Klasse 'center-block' hinzu - es wird kein zusätzliches CSS benötigt
quelle
mx-auto
anstelle voncenter-block
Twitter Bootstrap hat eine Klasse, die zentriert: .paginierungszentriert
Es hat bei mir funktioniert:
Das CSS für die Klasse lautet:
quelle
.text-center
Klasse?Sie könnten Folgendes verwenden. Es unterstützt Bootstrap 3.x oben.
quelle
Angenommen, neben dem Bild befindet sich nichts anderes. Am besten verwenden Sie es
text-align: center
imimg
übergeordneten Element:Bearbeiten
Wie in den anderen Antworten erwähnt, können Sie die Bootstrap-CSS-Klasse
.text-center
zum übergeordneten Element hinzufügen . Dies gilt genau das Gleiche und ist sowohl verfügbar v2.3.3 und v3quelle
<ul>
sollte immer noch in der Mitte ausgerichtet sein: jsfiddle.net/N74N7/1 Es muss einen anderen CSS-Code geben, der sich darauf auswirktFunktioniert bei mir. versuchen Sie es mit
center-block
quelle
Ich brauche das gleiche und hier habe ich die Lösung gefunden:
https://stackoverflow.com/a/15084576/1140407
und zu CSS:
quelle
Sie können die Eigenschaft margin mit der Bootstrap-IMG-Klasse verwenden.
quelle
Anscheinend könnten wir eine neue HTML5-Funktion verwenden, wenn die Browserversion kein Problem darstellt:
in HTML-Dateien:
Und in die CSS-Datei schreiben wir:
Und so könnte das div perfekt im Browser zentriert sein.
quelle
Du solltest benutzen
quelle
Ich benutze
justify-content-center
Klasse für eine Zeile in einem Container. Funktioniert gut mit Bootstrap 4.quelle
Ich habe dies erstellt und Site.css hinzugefügt.
quelle
Sie können das CSS der vorherigen Lösung wie folgt ändern:
Dies sollte auch alle Elemente im übergeordneten Element zentrieren
div
.quelle