Bootstrap con centro di allineamento immagine reattivo 3

423

Faccio un catalogo usando Bootstrap 3. Quando visualizzate su tablet, le immagini dei prodotti sembrano brutte a causa delle loro dimensioni ridotte (500x500) e una larghezza di 767 pixel nel browser. Voglio mettere l'immagine al centro dello schermo, ma per qualche ragione non posso. Chi sarà aiuterà a risolvere il problema?

Schermata di una parte della pagina di un prodotto con il prodotto non centrato sotto il titolo

— Konstantin Rusanov
fonte

5

Mi piace il design del tuo sito e dei prodotti - bel lavoro:)

— Bojangles,

7

Un altro esempio di "Perché abbiamo bisogno di inserire il codice nel corpo della domanda".

— LEQADA,

572

Se si utilizza Bootstrap v3.0.1 o versione successiva, è necessario utilizzare questa soluzione . Non sostituisce gli stili di Bootstrap con CSS personalizzati, ma utilizza invece una funzione Bootstrap.

La mia risposta originale è mostrata sotto per i posteri

Questa è una soluzione piacevolmente facile. Perché .img-responsiveda Bootstrap è già impostato display: block, è possibile utilizzare margin: 0 autoper centrare l'immagine:

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

— Bojangles
fonte

35

Probabilmente è meglio creare una nuova classe con margin: 0 auto, piuttosto che cambiare .img-responsive.

— Knite,

4

Questo è un pensiero, anche se personalmente non riesco a pensare a nessun posto in cui vorrei un'immagine reattiva non centrata, specialmente con questo design. Tutto dipende dal caso d'uso e da ciò che accadrà in futuro

— Bojangles,

Si prega di consultare questa risposta se si utilizza Bootstrap v4 o superiore: stackoverflow.com/a/43293957/4102515

— snorberhuis

1156

C'è .center-blockclasse in Twitter Bootstrap 3 ( dalla v3.0.1 ), quindi usa:

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

— DHlavaty
fonte

27

Questa dovrebbe essere la risposta accettata, in quanto non è necessario aggiungere alcun CSS per usarla.

— user2602152

16

class="img-responsive" style="margin: 0 auto;"funziona per me class="img-responsive center-block"no (bootstrap 3, ma una versione di qualche mese fa)

— mxro

9

Align center non funziona quando si utilizza img-responsive.

— Ismael,

1

@DHlavaty puoi spiegare la differenza tra usare .img-responsive AND .center-block e semplicemente usare .img-responsive con un margine automatico come suggerisce la risposta accettata? un metodo è più robusto?

— user137717

1

Potresti non volerlo usare se la tua immagine dovrebbe essere cliccabile. Cioè, se è racchiuso in una <a href="#"> </a>coppia, l'area cliccabile verrà espansa per l'intera larghezza del contenitore che racchiude che potrebbe essere un po 'più grande della tua immagine. Ciò può confondere gli utenti che fanno clic su quello che pensano sia spazio "vuoto".

— CXJ

108

Aggiungi solo la classe center-blocka un'immagine, funziona anche con Bootstrap 4:

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

Nota: center-blockfunziona anche quando img-responsiveviene utilizzato

— Harry Bosh
fonte

6

Migliore risposta, ma sottovalutata. Ecco perché usi un framework!

— Baumannzone,

Così. Fantastico. Grazie

— AndrewLeonardi,

Funziona

— Dhiren Patel,

31

Usa la .text-centerclasse solo se stai usando Bootstrap 3.

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

Nota: questo non funziona con img-responsive

— Sai Kiran Sripada
fonte

1

La domanda riguardaimg-responsive

— Alexey Kosov,

Per img-responsive aggiungi img-center (testato il 3.3.6) per coloro che potrebbero vederlo nelle ricerche su Google

— DardanM,

10

Questo dovrebbe centrare l'immagine e renderla reattiva.

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

— nPcomp
fonte

6

Suggerirei una classificazione più "astratta". Aggiungi una nuova classe "img-center" che può essere utilizzata in combinazione con la classe .img-responsive:

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

— Michael
fonte

3

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

— Ahmed
fonte

2

Perché display: table ? È già display: blockabbastanza per mettersi margin: 0 autoal lavoro

— Bojangles,

3

Puoi ancora lavorare con img-responsive senza influire su altre immagini con questa classe di stile.

Puoi precedere questo tag con la sezione id / div id / class per definire un ordine all'interno del quale imgè nidificato. Questa abitudineimg-responsive funzionerà solo in quella zona.

Supponiamo di avere un'area HTML definita come:

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

Quindi, il tuo CSS può essere:

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

Nota: questa risposta è in relazione al potenziale impatto dell'alterazione img-responsivenel suo insieme. Certo, center-blockè la soluzione più semplice.

— KannarKK
fonte

Questa risposta è sottovalutata, il confezionamento dell'immagine nella classe della riga è cruciale per centrare l'immagine quando c'è un testo sotto l'immagine.

— Glenn Plas,

3

Prova questo codice funzionerà anche con icone piccole con bootstrap 4 perché non esiste una classe di blocco centrale è bootstrap 4, quindi prova questo metodo che sarà utile. Puoi cambiare la posizione dell'immagine impostando .col-md-12su .col-md-8o .col-md-4, dipende da te.

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

3

Prova questo:

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

Espandi frammento

— Rafiqul Islam
fonte

3

Inserisci semplicemente tutte le miniature delle immagini all'interno di una riga / colonna div in questo modo:

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

e tutto funzionerà bene!

— Ingegneria Energetica
fonte

2

Per aggiungere alle risposte già date, avendo la img-responsivein combinazione con img-thumbnailfisserà display: blocka display: inline block.

— M. Oranje
fonte

2

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

.

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

— user956584
fonte

0

Puoi correggerlo con il margine di definizione: 0 auto

oppure puoi usare anche 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>

Espandi frammento

— Ganesh Putta
fonte

0

Il modo più esatto applicato a tutti gli oggetti Booostrap usando solo le classi standard sarebbe quello di non impostare i margini superiore e inferiore (poiché l'immagine può ereditare questi dai genitori), quindi sto sempre usando:

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

Ho anche fatto un Gist per questo, quindi se si applicano modifiche a causa di eventuali bug, la versione di aggiornamento sarà sempre qui: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66

— LordMagik
fonte

0

Finora la migliore soluzione da accettare sembra essere <img class="center-block" ... />. Ma nessuno ha menzionato comecenter-block funziona.

Prendi Bootstrap v3.3.6 per esempio:

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

Il valore predefinito di dispalyfor <img>è inline. Il valore blockmostrerà un elemento come elemento a blocchi (come <p>). Inizia su una nuova riga e occupa l'intera larghezza. In questo modo, le due impostazioni dei margini consentono all'immagine di rimanere orizzontalmente al centro.

— themefield
fonte