So richten Sie einen Bildtotpunkt am Bootstrap aus

207

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?

Fixer
quelle
Und übrigens. Vielleicht möchten Sie einen Blick auf den Abschnitt "Versetzen von Spalten" werfen. twitter.github.com/bootstrap/scaffolding.html#gridSystem
mind85
Jemand hat dies als keine Antwort gekennzeichnet, und ich stimme zu. Bitte fügen Sie dies als Kommentar hinzu und Ihre Antwort wird in Kürze gelöscht.
Tckmn
1
Wenn img-responsiveIhr imgTag 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-blockKlasse dieses Problem auf Bootstrap-Weise löst.
Cssyphus
Wenn Sie Bootstrap verwenden, können Sie dies tun: stackoverflow.com/a/59469712/4654957
Diego Venâncio

Antworten:

271

Twitter Bootstrap v3.0.3 hat eine Klasse: center-block

Inhaltsblöcke zentrieren

Legen Sie ein anzuzeigendes Element fest: Block und Mitte über Rand. Erhältlich als Mixin und Klasse.

Müssen nur eine Klasse .center-blockin das imgTag hinzufügen , sieht so aus

<div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"><img class="center-block" src="logo.png" /></div>
    <div class="span4"></div>
  </div>
</div>

In Bootstrap hat bereits CSS-Stil Aufruf .center-Block

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

Sie können ein Beispiel von hier sehen

user3098434
quelle
1
Das schließende </div>Tag auf dem containerDiv scheint zu fehlen. Dies funktioniert nicht für mich auf v3.3.7
Tarabyte
141

Der richtige Weg dies zu tun ist

<div class="row text-center">
  <img ...>
</div>
fabiangebert
quelle
25
Dies funktionierte nicht für mich, als ich es auf diesem - startbootstrap.com/round-about .. verwendete, aber das Hinzufügen einer Klasse center-blockzu den <img>Elementen funktionierte ..
Sumeet Pareek
3
Text-Center funktioniert nicht bei Bildern mit img-responsive Klasse, aber der obige Kommentar (über Center-Block) löst dieses Problem
Trojaner
Eine Beobachtung: In Bootstrap v3.1.0 ist es möglich, img-responsive in der Spalte zu zentrieren, indem der Spalte eine Textzentrierung hinzugefügt wird. Dieses Verhalten ist in Version 3.3.4 fehlerhaft. Sehr nervig. CSS ist scheiße.
f470071
Sie sollten stattdessen Center-Block verwenden, wie in den Dokumenten angegeben: getbootstrap.com/css/#images-responsive
Nacho
95

Update 2018

Die center-blockKlasse ist in Bootstrap 4 nicht mehr vorhanden . Verwenden Sie mx-auto d-block... , um ein Bild in Bootstrap 4 zu zentrieren.

<img src="..." class="mx-auto d-block"/>
Zim
quelle
6
Nur um 'Update 2018' eine kleine Erklärung hinzuzufügen: mx-auto setzt den linken und rechten Rand auf auto; D-Block setzt Anzeige: Block
Michael Moriarty
85

Fügen Sie dem Bild als Klasse 'center-block' hinzu - es wird kein zusätzliches CSS benötigt

<img src="images/default.jpg" class="center-block img-responsive"/>
adswebwork
quelle
8
Ich bin mir nicht sicher, warum das -1 - DAS IST MIT Abstand DIE BESTE ANTWORT! Es verwendet die in Bootstrap integrierte Hilfsklasse.
user2562923
4
Verwenden Sie in Bootstrap 4 mx-autoanstelle voncenter-block
Quantum7
52

Twitter Bootstrap hat eine Klasse, die zentriert: .paginierungszentriert

Es hat bei mir funktioniert:

<div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>

Das CSS für die Klasse lautet:

.pagination-centered {
  text-align: center;
}
David Silva Smith
quelle
18
Oder vielleicht .text-centerKlasse?
Trejder
36

Sie könnten Folgendes verwenden. Es unterstützt Bootstrap 3.x oben.

<img src="..." alt="..." class="img-responsive center-block" />
Dulith De Costa
quelle
Danke dafür. Genau das, was ich heute brauchte.
Ryan Wilson
28

Angenommen, neben dem Bild befindet sich nichts anderes. Am besten verwenden Sie es text-align: centerim imgübergeordneten Element:

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

Bearbeiten

Wie in den anderen Antworten erwähnt, können Sie die Bootstrap-CSS-Klasse .text-centerzum übergeordneten Element hinzufügen . Dies gilt genau das Gleiche und ist sowohl verfügbar v2.3.3 und v3

Mein Kopf tut weh
quelle
Perfekt - das macht den Job. Aber sagen wir, ich habe ein <ul> -Element unter dem Bild ... Dies richtet die Mitte nicht wie erwartet aus. Kann ich etwas hinzufügen? Danke
Fixer
1
Da .row in einer der Kernklassen in Twitter Bootstrap. Ich würde empfehlen, eine neue Klasse wie auf dieser Seite twitter.github.com/bootstrap/index.html mit dem Klassen-Impressum zu definieren.
Taufe
1
@Fixer Das <ul>sollte immer noch in der Mitte ausgerichtet sein: jsfiddle.net/N74N7/1 Es muss einen anderen CSS-Code geben, der sich darauf auswirkt
Mein Kopf tut am
verbrachte mehr als 2 oder 3 Stunden und nur diese Linie ... danke!
Alamin
18

Funktioniert bei mir. versuchen Sie es mitcenter-block

<div class="container row text-center">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img class="center-block" src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>
Leroy Gumede
quelle
6

Ich brauche das gleiche und hier habe ich die Lösung gefunden:

https://stackoverflow.com/a/15084576/1140407

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

und zu CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}
Shiv
quelle
Ich denke, Bootstrap-Leute müssen es zu ihrem CSS hinzufügen
Muhammad Ahsan
Hallo und danke! Ich verwende jetzt Bootstrap v3. Ich habe dies zu meinem img container div hinzugefügt, also musste ich (zumindest) die genaue Breite für mein div angeben, damit die Dinge funktionieren. Wenn Sie keinen Container oder unterschiedliche Bildgrößen haben, fügen Sie diese Klasse Ihrem Bild hinzu.
Inan
1

Sie können die Eigenschaft margin mit der Bootstrap-IMG-Klasse verwenden.

.name-of-class .img-responsive { margin: 0 auto; }
Venkatesh Rajavetrivel
quelle
1

Anscheinend könnten wir eine neue HTML5-Funktion verwenden, wenn die Browserversion kein Problem darstellt:

in HTML-Dateien:

<div class="centerBloc">
  I will be in the center
</div>

Und in die CSS-Datei schreiben wir:

body .centerBloc {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Und so könnte das div perfekt im Browser zentriert sein.

Laurent
quelle
3
Die Klasse Ihres Div heißt .centerBloc und Ihre CSS-Datei zeigt body.loadingDiv ...
Martin
Jetzt behoben @Martin
dtechplus
0

Du solltest benutzen

<div class="row fluid-img">
  <img class="col-lg-12 col-xs-12" src="src.png">
</div>

.fluid-img {
    margin: 60px auto;
}

@media( min-width: 768px ){
        .fluid-img {
            max-width: 768px;
        }
}
@media screen and (min-width: 768px) {
        .fluid-img {
            padding-left: 0;
            padding-right: 0;
        }
}
ed3d
quelle
0

Ich benutze justify-content-centerKlasse für eine Zeile in einem Container. Funktioniert gut mit Bootstrap 4.

<div class="container-fluid">
  <div class="row justify-content-center">
   <img src="logo.png" />
  </div>
</div>
Bassment
quelle
0

Ich habe dies erstellt und Site.css hinzugefügt.

.img-responsive-center {
    display: block;
    height: auto;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}
Chris Catignani
quelle
-3

Sie können das CSS der vorherigen Lösung wie folgt ändern:

.container, .row { text-align: center; }

Dies sollte auch alle Elemente im übergeordneten Element zentrieren div.

Nandu
quelle