Responsive image align center bootstrap 3

Robię katalog przy użyciu Bootstrap 3. Obrazy wyświetlane na tabletach wyglądają brzydko ze względu na ich mały rozmiar (500 x 500) i szerokość 767 pikseli w przeglądarce. Chcę umieścić obraz na środku ekranu, ale z jakiegoś powodu nie mogę. Kto pomoże rozwiązać problem?

Jeśli używasz Bootstrap w wersji 3.0.1 lub nowszej, powinieneś użyć tego rozwiązania . Nie zastępuje stylów Bootstrap niestandardowym CSS, ale zamiast tego używa funkcji Bootstrap.

Moja oryginalna odpowiedź jest pokazana poniżej dla potomności

Jest to przyjemnie łatwa naprawa. Ponieważ .img-responsivez Bootstrap już ustawiono display: block, możesz użyć margin: 0 autodo wyśrodkowania obrazu:

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

W .center-blockTwitter Bootstrap 3 jest klasa ( od wersji 3.0.1 ), więc użyj:

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

Dodaj tylko klasę center-blockdo obrazu, działa to również z Bootstrap 4:

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

Uwaga: center-blockdziała nawet wtedy, gdy img-responsivejest używany

Po prostu użyj .text-centerklasy, jeśli używasz Bootstrap 3.

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

Uwaga: To nie działa w przypadku reagowania na img

To powinno wyśrodkować obraz i sprawić, by był responsywny.

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

Sugerowałbym bardziej „abstrakcyjną” klasyfikację. Dodaj nową klasę „img-center”, której można używać w połączeniu z klasą reagującą na .img:

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

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

W img-responsivetej klasie stylów możesz nadal pracować bez wpływu na inne obrazy.

Możesz poprzedzić ten tag sekcją id / div id / class, aby zdefiniować kolejność, w której imgjest on zagnieżdżony. Ten zwyczaj img-responsivebędzie działał tylko w tym obszarze.

Załóżmy, że masz obszar HTML zdefiniowany jako:

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

Następnie twój CSS może być:

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

Uwaga: Ta odpowiedź dotyczy potencjalnego wpływu zmian img-responsivejako całości. Oczywiście center-blockjest najprostszym rozwiązaniem.

Wypróbuj ten kod, będzie działał również w przypadku małych ikon z bootstrap 4, ponieważ nie ma klasy bloku centralnego to bootstrap 4, więc wypróbuj tę metodę, która będzie pomocna. Można zmienić położenie obrazu poprzez ustawienie .col-md-12się .col-md-8lub .col-md-4, to zapisu do Ciebie.

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

Spróbuj tego:

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

Po prostu umieść wszystkie miniatury obrazów w wierszach / kolumnach w następujący sposób:

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

i wszystko będzie dobrze działać!

Aby dodać do odpowiedzi już podanych, posiadające img-responsivew połączeniu z img-thumbnailustawi display: blocksię display: inline block.

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

.

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

Możesz to naprawić definiując margines: 0 auto

lub możesz użyć również col-md-offset

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

Bardziej dokładnym sposobem zastosowanym do wszystkich obiektów Booostrap przy użyciu tylko klas standardowych byłoby nie ustawianie marginesów górnego i dolnego (ponieważ obraz może dziedziczyć je od rodzica), więc zawsze używam:

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

Zrobiłem też Gist dla tego, więc jeśli jakieś zmiany będą miały zastosowanie z powodu jakichkolwiek błędów, wersja aktualizacji będzie zawsze tutaj: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66

Jak dotąd wydaje się, że najlepszym rozwiązaniem jest akceptacja <img class="center-block" ... />. Ale nikt nie wspominał, jak to center-blockdziała.

Weźmy na przykład Bootstrap v3.3.6:

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

Wartość domyślna dispalydla <img>to inline. Wartość blockwyświetli element jako element blokowy (jak <p>). Zaczyna się od nowej linii i zajmuje całą szerokość. W ten sposób dwa ustawienia marginesów pozwalają obrazowi pozostać w środku poziomo.