wake-up-neo.com

Responsive Image Align Center Bootstrap 3 ausrichten

Ich benutze einen Katalog mit Bootstrap 3. Bei der Anzeige auf Tablets sehen die Produktbilder aufgrund ihrer geringen Größe (500 x 500) und einer Breite von 767 Pixeln im Browser unschön aus. Ich möchte das Bild in die Mitte des Bildschirms stellen, aber aus irgendeinem Grund kann ich das nicht. Wer hilft, das Problem zu lösen?

enter image description here

398

Wenn Sie Bootstrap Version 3.0.1 oder höher verwenden, sollten Sie stattdessen diese Lösung verwenden. Bootstrap-Stile werden nicht mit benutzerdefiniertem CSS überschrieben, sondern es wird eine Bootstrap-Funktion verwendet.

Meine ursprüngliche Antwort wird unten für die Nachwelt angezeigt


Dies ist eine angenehm einfache Lösung. Da .img-responsive von Bootstrap display: block bereits festgelegt ist, können Sie margin: 0 auto zum Zentrieren des Bildes verwenden:

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

In Twitter Bootstrap 3 (Since v3.0.1) gibt es .center-block class. Verwenden Sie also:

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

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

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

Hinweis: center-block funktioniert auch, wenn img-responsive verwendet wird

99
Harry Bosh

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

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

Hinweis: Dies funktioniert nicht mit img-responsive

31

Dies sollte das Bild zentrieren und ansprechbar machen.

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

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

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

Sie können weiterhin mit img-responsive arbeiten, ohne andere Bilder mit dieser Stilklasse zu beeinträchtigen.

Sie können diesem Tag den Abschnitt id/div id/class voranstellen, um eine Reihenfolge zu definieren, in der diese img verschachtelt ist. Diese benutzerdefinierte img-responsive funktioniert 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 der Änderung von img-responsive als Ganzes. Natürlich ist center-block die einfachste Lösung.

3
KannarKK

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>

3
Rafiqul Islam

Um zu den bereits gegebenen Antworten hinzuzufügen, wird img-responsive mit img-thumbnail in Kombination mit display: block auf display: inline block gesetzt.

2
M. Oranje

Probieren Sie diesen Code aus, er funktioniert auch für kleine Icons mit Bootstrap 4, da Bootstrap 4 keine Center-Block-Klasse enthält. Sie können die Position des Bildes ändern, indem Sie .col-md-12 auf .col-md-8 oder .col-md-4 setzen. 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>
2
faseeh
<div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

.

<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>
2
user956584
@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}
2
Ahmed

Legen Sie einfach alle Miniaturansichten der Bilder in eine Zeile/Spalte wie folgt:

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

und alles wird gut funktionieren!

1

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

Nehmen Sie zum Beispiel Bootstrap v3.3.6:

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

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

0
themefield

Die präzisere Methode, die auf alle Booostrap-Objekte angewendet wird, die nur Standardklassen verwenden, besteht darin, den oberen und den unteren Rand nicht festzulegen (da Bilder diese vom übergeordneten Element erben können). Daher verwende ich immer:

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

Ich habe auch eine Gist für das gemacht, also wenn Änderungen wegen irgendwelcher Bugs zutreffen, wird die Update-Version immer hier sein: https://Gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66

0
LordMagik

Sie können dies mit einem definierten Rand korrigieren: 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>

0
Ganesh Putta