So richten Sie einen Bildtotpunkt am Bootstrap aus

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?

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

Der richtige Weg dies zu tun ist

<div class="row text-center">
  <img ...>
</div>

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"/>

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"/>

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;
}

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

<img src="..." alt="..." class="img-responsive center-block" />

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

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>

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;
}

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

.name-of-class .img-responsive { margin: 0 auto; }

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.

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;
        }
}

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>

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;
}

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.