So richten Sie ein Bild-Totpunkt mit Bootstrap aus

Twitter Bootstrap v3.0.3 hat eine Klasse: Center-Block

Inhaltsblöcke zentrieren

Festlegen eines anzuzeigenden Elements: Blockieren und über Rand zentrieren. Verfügbar als Mixin und Klasse.

Sie müssen lediglich eine Klasse "center-block" im img-Tag hinzufügen

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

In Bootstrap gibt es bereits einen CSS-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>

Fügen Sie als Klasse "center-block" hinzu - es ist keine zusätzliche CSS erforderlich

<img src="images/default.jpg" class="center-block img-responsive"/>

Update 2018

Die center-block-Klasse existiert nicht mehr in Bootstrap 4 . Um ein Bild in Bootstrap 4 zu zentrieren, verwenden Sie mx-auto d-block...

<img src="..." class="mx-auto d-block"/>

Twitter Bootstrap hat eine Klasse, die zentriert ist: .paginationszentriert

Es hat für mich funktioniert:

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

Die 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 gibt es nichts anderes. Am besten verwenden Sie text-align: center in der img-Komponente:

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

Bearbeiten

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

Funktioniert bei mir. versuchen Sie es mit center-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;
}

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 der CSS-Datei schreiben wir:

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

Das div könnte also perfekt im Browser zentriert sein.

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

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

Ich benutze justify-content-center class 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>

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 habe das erstellt und zu Site.css hinzugefügt.

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