Bagaimana menyelaraskan pusat gambar mati dengan bootstrap

Saya menggunakan kerangka bootstrap dan mencoba untuk mendapatkan gambar yang terpusat secara horizontal tanpa hasil ..

Saya sudah mencoba berbagai teknik seperti membelah sistem 12 grid dalam 3 blok yang sama misalnya

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

Apa metode termudah untuk membuat gambar terpusat relatif terhadap halaman?

Twitter Bootstrap v3.0.3 memiliki kelas: blok-tengah

Pusatkan blok konten

Setel elemen untuk ditampilkan: blok dan pusatkan melalui margin. Tersedia sebagai mixin dan kelas.

Hanya perlu menambahkan kelas .center-blockdi imgtag, terlihat seperti ini

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

Di Bootstrap sudah ada panggilan gaya css .center-block

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

Anda dapat melihat sampel dari sini

Cara yang benar untuk melakukan ini adalah

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

Perbarui 2018

The center-blockkelas tidak ada lagi di Bootstrap 4 . Untuk memusatkan gambar di Bootstrap 4, gunakan mx-auto d-block...

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

Tambahkan 'blok-tengah' ke gambar sebagai kelas - tidak perlu css tambahan

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

Bootstrap Twitter memiliki kelas yang berpusat: .paginasi berpusat

Ini berhasil saya lakukan:

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

Css untuk kelas adalah:

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

Anda bisa menggunakan yang berikut ini. Ini mendukung Bootstrap 3.x di atas.

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

Dengan asumsi tidak ada yang lain di samping gambar, cara terbaik adalah menggunakan text-align: centerdi imginduk:

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

Edit

Seperti disebutkan dalam jawaban lain, Anda bisa menambahkan kelas CSS bootstrap .text-centerke elemen induk. Ini melakukan hal yang persis sama dan tersedia di v2.3.3 dan v3

Bekerja untukku. coba gunakancenter-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>

Saya memerlukan hal yang sama dan di sini saya menemukan solusinya:

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

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

dan ke CSS:

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

Anda dapat menggunakan properti margin dengan kelas img bootstrap.

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

Tampaknya kami dapat menggunakan fitur HTML5 baru jika versi browser tidak menjadi masalah:

dalam file HTML:

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

Dan dalam file CSS, kita menulis:

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

Dan div bisa menjadi pusat perhatian di browser.

Kamu harus menggunakan

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

Saya menggunakan justify-content-centerkelas ke baris dalam sebuah wadah. Bekerja dengan baik dengan Bootstrap 4.

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

Saya membuat ini dan menambahkan ke Site.css.

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

Anda dapat mengubah CSS dari solusi sebelumnya seperti di bawah ini:

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

Ini harus memusatkan semua elemen di induk divjuga.