Responsive Image Align Center Bootstrap 3

Ich erstelle einen Katalog mit Bootstrap 3. Wenn sie auf Tablets angezeigt werden, sehen die Produktbilder aufgrund ihrer geringen Größe (500 x 500) und einer Breite von 767 Pixel im Browser hässlich aus. Ich möchte das Bild in die Mitte des Bildschirms stellen, kann es aber aus irgendeinem Grund nicht. Wer wird helfen, das Problem zu lösen?

Wenn Sie Bootstrap v3.0.1 oder höher verwenden, sollten Sie stattdessen diese Lösung verwenden. Es überschreibt die Bootstrap-Stile nicht mit benutzerdefiniertem CSS, sondern verwendet stattdessen eine Bootstrap-Funktion.

Meine ursprüngliche Antwort ist unten für die Nachwelt gezeigt

Dies ist eine angenehm einfache Lösung. Da .img-responsivevon Bootstrap bereits festgelegt wurde display: block, können Sie margin: 0 autodas Bild zentrieren:

.product .img-responsive {
    margin: 0 auto;
}

Es gibt eine .center-blockKlasse in Twitter Bootstrap 3 ( seit v3.0.1 ), also verwenden Sie:

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

Fügen Sie center-blockeinem Image nur die Klasse hinzu . Dies funktioniert auch mit Bootstrap 4:

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

Hinweis: Funktioniert center-blockauch bei img-responsiveVerwendung

Verwenden .text-centerSie einfach class, wenn Sie Bootstrap 3 verwenden.

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

Hinweis: Dies funktioniert nicht mit img-responsive

Dies sollte das Bild zentrieren und reaktionsfähig machen.

<img src="..." class="img-responsive" style="margin:0 auto;"/>

Ich würde eine "abstraktere" Klassifizierung vorschlagen. Fügen Sie eine neue Klasse "img-center" hinzu, die in Kombination mit der auf .img reagierenden Klasse verwendet werden kann:

// Center responsive images
.img-responsive.img-center {
  margin: 0 auto;
}

@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}

Mit dieser Stilklasse können Sie weiterhin arbeiten, img-responsiveohne andere Bilder zu beeinträchtigen.

Sie können diesem Tag die Abschnitts-ID / Div-ID / Klasse voranstellen, um eine Reihenfolge zu definieren, in der diese imgverschachtelt ist. Dieser Brauch img-responsivefunktioniert nur in diesem Bereich.

Angenommen, Sie haben einen HTML-Bereich definiert als:

<section id="work"> 
    <div class="container">
        <div class="row">
            <img class="img-responsive" src="some_image.jpg">
        </div>
    </div>
</section>

Dann kann Ihr CSS sein:

section#work .img-responsive{
    margin: 0 auto;
}

Hinweis: Diese Antwort bezieht sich auf die möglichen Auswirkungen von Änderungen img-responsiveinsgesamt. Natürlich center-blockist die einfachste Lösung.

Versuchen Sie diesen Code, er funktioniert auch für kleine Symbole mit Bootstrap 4, da es keine Centerblock-Klasse für Bootstrap 4 gibt. Versuchen Sie diese Methode, es ist hilfreich. Sie können die Position des Bildes ändern , indem Sie .col-md-12auf .col-md-8oder setzen .col-md-4. Es liegt an Ihnen.

<div class="container">
       <div class="row">
          <div class="col-md-12">
            <div class="text-xs-center text-lg-center">
           <img src="" class="img-thumbnail">
           </div>
          </div>
       </div>
  </div>

Versuche dies:

.img-responsive{
    display: block;
    height: auto;
    max-width: 100%;
	  margin:0 auto;
}
.Image{
  background:#ccc;
  padding:30px;
}

<div class="Image">
  <img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>

Fügen Sie einfach alle Miniaturbilder der Bilder wie folgt in eine Zeile / Spalte ein:

<div class="row text-center">
 <div class="col-12">
  # your images here...
 </div>
</div>

und alles wird gut funktionieren!

Um bereits auf die Antworten gegeben, das mit img-responsivemit in Kombination img-thumbnailgesetzt display: blockzu display: inline block.

<div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

.

<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>

Sie können dies beheben, indem Sie den Rand definieren: 0 auto

oder Sie können auch col-md-offset verwenden

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
.img-responsive{
margin:0 auto;
}
</style>
<body>

<div class="container">
  <h2>Image</h2>
<div class="row">
<div class="col-md-12">
  <p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>                  
  <img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> 
</div>
</div>
</div>

</body>
</html>

Die genauere Methode, die auf alle Booostrap-Objekte angewendet wird, die nur Standardklassen verwenden, besteht darin, keine oberen und unteren Ränder festzulegen (da das Bild diese vom übergeordneten Objekt erben kann). Daher verwende ich immer:

.text-center .img-responsive {
    margin-left: auto;
    margin-right: auto;
}

Ich habe auch eine Zusammenfassung dafür erstellt. Wenn also aufgrund von Fehlern Änderungen vorgenommen werden, ist die Update-Version immer hier: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66

Bisher scheint die beste zu akzeptierende Lösung zu sein <img class="center-block" ... />. Aber niemand hat erwähnt, wie es center-blockfunktioniert.

Nehmen Sie zum Beispiel Bootstrap v3.3.6:

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

Der Standardwert von dispalyfür <img>ist inline. Der Wert blockzeigt ein Element als Blockelement an (wie <p>). Es beginnt in einer neuen Zeile und nimmt die gesamte Breite ein. Auf diese Weise bleibt das Bild durch die beiden Randeinstellungen horizontal in der Mitte.