Responsive image align center bootstrap 3

423

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?

Zrzut ekranu części strony produktu, na której produkt nie jest wyśrodkowany pod nagłówkiem

html css image twitter-bootstrap alignment Konstantin Rusanov
źródło

5

Podoba mi się projekt Twojej witryny i produktów - dobra robota:)

Bojangles

7

Kolejny przykład „Dlaczego potrzebujemy umieścić kod w treści pytania”.

LEQADA,

572

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

Bojangles
źródło

35

Prawdopodobnie lepiej jest utworzyć nową klasę margin: 0 auto, zamiast zmieniać responsywną .img.

knite

4

To jest myśl, chociaż osobiście nie mogę wymyślić gdziekolwiek, chciałbym responsywnego obrazu, który nie byłby wyśrodkowany, szczególnie w tym projekcie. Wszystko zależy od przypadku użycia i tego, co wydarzy się w przyszłości

Bojangles,

Proszę zobaczyć tę odpowiedź, jeśli używasz Bootstrap v4 lub nowszego: stackoverflow.com/a/43293957/4102515

snorberhuis

1156

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

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

DHlavaty
źródło

27

To powinna być zaakceptowana odpowiedź, ponieważ nie trzeba dodawać żadnych CSS, aby z nich skorzystać.

user2602152

16

class="img-responsive" style="margin: 0 auto;"działa dla mnie class="img-responsive center-block"nie (bootstrap 3, ale wersja kilka miesięcy)

mxro

9

Wyrównaj centrum nie działa, gdy używana jest funkcja reagowania na img.

Ismael

1

@DHlavaty, czy możesz wyjaśnić różnicę między używaniem .img-responsive AND .center-block a zwykłym używaniem .img-responsive z automatycznym marginesem, jak sugeruje zaakceptowana odpowiedź? czy jedna metoda jest bardziej niezawodna?

user137717,

1

Możesz nie chcieć tego używać, jeśli obraz ma być klikalny. Oznacza to, że jeśli jest zawinięty w <a href="#"> </a>parę, klikalny obszar zostanie rozszerzony do pełnej szerokości otaczającego pojemnika, który może być nieco większy niż obraz. Może to dezorientować użytkowników, którzy klikną na „puste” miejsce, które ich zdaniem.

CXJ

108

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

Harry Bosh
źródło

6

Najlepsza odpowiedź, ale niedoceniana. Dlatego używasz frameworka!

Baumannzone

Więc. Fantastyczny. Dziękuję

AndrewLeonardi,

Jego praca .. Dzięki

Dhiren Patel

31

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

Sai Kiran Sripada
źródło

1

Pytanie dotyczyimg-responsive

Aleksieja Kosowa

W przypadku reagujących na img dodaj centrum img (testowane w 3.3.6) dla tych, którzy mogą to zobaczyć w wyszukiwarkach Google

DardanM

10

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

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

nPcomp
źródło

6

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

Michał
źródło

3

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

Ahmed
źródło

2

Dlaczego display: table? To już display: blockwystarczy, aby zabrać się margin: 0 autodo pracy

Bojangles

3

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.

KannarKK
źródło

Ta odpowiedź jest niedoceniana, zawijanie obrazu do klasy wiersza ma kluczowe znaczenie w wyśrodkowaniu obrazu, gdy pod obrazem znajduje się tekst.

Glenn Plas,

3

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>

faseeh
źródło

3

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>

Rozwiń fragment kodu

Rafiqul Islam
źródło

3

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

Inżynieria energetyczna
źródło

2

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

M. Oranje
źródło

2

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

.

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

użytkownik956584
źródło

0

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>

Rozwiń fragment kodu

Ganesh Putta
źródło

0

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

LordMagik
źródło

0

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.

temat
źródło

Responsive image align center bootstrap 3

Odpowiedzi: