Come allineare un punto morto dell'immagine con bootstrap

Sto usando il framework bootstrap e sto cercando di centrare un'immagine centrata orizzontalmente senza successo.

Ho provato varie tecniche come la divisione del sistema a 12 griglie in 3 blocchi uguali, ad es

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

Qual è il metodo più semplice per centrare un'immagine rispetto alla pagina?

Twitter Bootstrap v3.0.3 ha una classe: blocco centrale

Centra i blocchi di contenuti

Imposta un elemento da visualizzare: blocca e centra tramite margine. Disponibile come mixin e classe.

Ho solo bisogno di aggiungere una classe .center-blocknel imgtag, assomiglia a questo

<div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"><img class="center-block" src="logo.png" /></div>
    <div class="span4"></div>
  </div>
</div>

In Bootstrap ha già una chiamata in stile CSS .center-block

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

Puoi vedere un campione da qui

Il modo corretto di farlo è

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

Aggiornamento 2018

La center-blockclasse non esiste più in Bootstrap 4 . Per centrare un'immagine in Bootstrap 4, usa mx-auto d-block...

<img src="..." class="mx-auto d-block"/>

Aggiungi 'blocco centrale' all'immagine come classe - non sono necessari CSS aggiuntivi

<img src="images/default.jpg" class="center-block img-responsive"/>

Bootstrap di Twitter ha una classe centrata: centrata sulla .paginazione

Ha funzionato per me fare:

<div class="row-fluid">
   <div class="span12 pagination-centered"><img src="header.png" alt="header" /></div>
</div>

Il css per la classe è:

.pagination-centered {
  text-align: center;
}

È possibile utilizzare quanto segue. Supporta Bootstrap 3.x sopra.

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

Supponendo che non ci sia nient'altro a fianco dell'immagine, il modo migliore è usare text-align: centernel imggenitore:

.row .span4 {
    text-align: center;
}

modificare

Come menzionato nelle altre risposte, è possibile aggiungere la classe CSS bootstrap .text-centerall'elemento padre. Questo fa esattamente la stessa cosa ed è disponibile sia in v2.3.3 che in v3

Per me va bene. prova ad usarecenter-block

<div class="container row text-center">
    <div class="row">
      <div class="span4"></div>
      <div class="span4"><img class="center-block" src="logo.png" /></div>
      <div class="span4"></div>
    </div>
</div>

Ho bisogno dello stesso e qui ho trovato la soluzione:

https://stackoverflow.com/a/15084576/1140407

<div class="container">
  <div class="row">
    <div class="span9 centred">
      This div will be centred.
    </div>
  </div>
</div>

e ai CSS:

[class*="span"].centred {
  margin-left: auto;
  margin-right: auto;
  float: none;
}

È possibile utilizzare la proprietà margin con la classe img bootstrap.

.name-of-class .img-responsive { margin: 0 auto; }

Sembra che potremmo usare una nuova funzionalità HTML5 se la versione del browser non è un problema:

nei file HTML:

<div class="centerBloc">
  I will be in the center
</div>

E nel file CSS, scriviamo:

body .centerBloc {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

E così il div potrebbe essere perfettamente al centro del browser.

Dovresti usare

<div class="row fluid-img">
  <img class="col-lg-12 col-xs-12" src="src.png">
</div>

.fluid-img {
    margin: 60px auto;
}

@media( min-width: 768px ){
        .fluid-img {
            max-width: 768px;
        }
}
@media screen and (min-width: 768px) {
        .fluid-img {
            padding-left: 0;
            padding-right: 0;
        }
}

Sto usando la justify-content-centerclasse per una riga all'interno di un contenitore. Funziona bene con Bootstrap 4.

<div class="container-fluid">
  <div class="row justify-content-center">
   <img src="logo.png" />
  </div>
</div>

Ho creato questo e aggiunto a Site.css.

.img-responsive-center {
    display: block;
    height: auto;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}

È possibile modificare il CSS della soluzione precedente come di seguito:

.container, .row { text-align: center; }

Questo dovrebbe centrare anche tutti gli elementi nel genitore div.