Bootstrap pusat penyelarasan gambar responsif 3

423

Saya membuat katalog menggunakan Bootstrap 3. Saat ditampilkan pada tablet, gambar produk terlihat jelek karena ukurannya yang kecil (500x500) dan lebar 767 piksel dalam peramban. Saya ingin meletakkan gambar di tengah layar, tetapi untuk beberapa alasan saya tidak bisa. Siapa yang akan membantu menyelesaikan masalah?

Cuplikan layar bagian dari halaman produk dengan produk yang tidak berada di tengah di bawah judul

html css image twitter-bootstrap alignment Konstantin Rusanov
sumber

5

Saya suka desain situs dan produk Anda - kerja bagus:)

Bojangles

7

Contoh lain dari "Mengapa kita perlu kode tempat ke dalam tubuh pertanyaan".

LEQADA

572

Jika Anda menggunakan Bootstrap v3.0.1 atau lebih tinggi, Anda harus menggunakan solusi ini sebagai gantinya. Itu tidak mengesampingkan gaya Bootstrap dengan CSS khusus, tetapi sebaliknya menggunakan fitur Bootstrap.

Jawaban asli saya ditunjukkan di bawah ini untuk anak cucu

Ini adalah perbaikan yang sangat mudah dan menyenangkan. Karena .img-responsivedari Bootstrap sudah diset display: block, Anda dapat menggunakan margin: 0 autountuk memusatkan gambar:

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

Bojangles
sumber

35

Mungkin lebih baik membuat kelas baru dengan margin: 0 auto, daripada mengubah .img-responsif.

knite

4

Itu pemikiran, meskipun secara pribadi saya tidak bisa memikirkan di mana pun saya ingin gambar responsif tidak terpusat, terutama dengan desain ini. Itu semua tergantung pada use case, dan apa yang akan terjadi di masa depan

Bojangles

Silakan lihat jawaban ini jika Anda menggunakan Bootstrap v4 atau lebih tinggi: stackoverflow.com/a/43293957/4102515

snorberhuis

1156

Ada .center-blockkelas di Twitter Bootstrap 3 ( Sejak v3.0.1 ), jadi gunakan:

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

DHlavaty
sumber

27

Ini harus menjadi jawaban yang diterima, karena Anda tidak perlu menambahkan CSS apa pun untuk menggunakannya.

user2602152

16

class="img-responsive" style="margin: 0 auto;"bekerja untuk saya class="img-responsive center-block"tidak (bootstrap 3, tetapi versi berumur beberapa bulan)

mxro

9

Align center tidak berfungsi saat img-responsif digunakan.

Ismael

1

@DHlavaty dapatkah Anda menjelaskan perbedaan antara menggunakan .img-responsif DAN .center-block dan hanya menggunakan .img-responsif dengan margin otomatis seperti jawaban yang diterima menyarankan? Apakah satu metode lebih kuat?

user137717

1

Anda mungkin tidak ingin menggunakan ini jika gambar Anda seharusnya dapat diklik. Artinya, jika dibungkus di dalam <a href="#"> </a>pasangan, area yang dapat diklik akan diperluas ke lebar penuh dari wadah penutup yang mungkin sedikit lebih besar dari gambar Anda. Ini dapat membingungkan pengguna yang mengklik ruang yang mereka anggap "kosong".

CXJ

108

Tambahkan hanya kelas center-blockke gambar, ini bekerja dengan Bootstrap 4 juga:

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

Catatan: center-blockberfungsi bahkan saat img-responsivedigunakan

Harry Bosh
sumber

6

Respons terbaik, tapi diremehkan. Itu sebabnya Anda menggunakan kerangka kerja!

Baumannzone

Begitu. Fantastis. Terima kasih

AndrewLeonardi

Kerjanya..Terima kasih

Dhiren Patel

31

Cukup gunakan .text-centerkelas jika Anda menggunakan Bootstrap 3.

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

Catatan: Ini tidak berfungsi dengan img-responsif

Sai Kiran Sripada
sumber

1

Pertanyaannya adalah tentangimg-responsive

Alexey Kosov

Untuk menambahkan img-responsif img-pusat (diuji pada 3.3.6) bagi mereka yang mungkin melihat ini di pencarian google

DardanM

10

Ini harus memusatkan gambar dan membuatnya responsif.

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

nPcomp
sumber

6

Saya akan menyarankan klasifikasi yang lebih "abstrak". Tambahkan kelas baru "img-center" yang dapat digunakan dalam kombinasi dengan kelas .img-responsif:

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

Michael
sumber

3

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

Ahmed
sumber

2

Mengapa display: table? Sudah display: blockcukup untuk mulai margin: 0 autobekerja

Bojangles

3

Anda masih dapat bekerja dengan img-responsivetanpa memengaruhi gambar lain dengan kelas gaya ini.

Anda dapat mengawali tag ini dengan id bagian / div id / kelas untuk menentukan urutan di mana ini imgbersarang. Kebiasaan img-responsiveini hanya akan berfungsi di area itu.

Misalkan Anda memiliki area HTML yang didefinisikan sebagai:

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

Kemudian, CSS Anda dapat:

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

Catatan: Jawaban ini terkait dengan dampak potensial dari perubahan img-responsivesecara keseluruhan. Tentu saja, center-blockitu solusi paling sederhana.

KannarKK
sumber

Jawaban ini kurang dihargai, membungkus gambar dalam kelas baris sangat penting dalam memusatkan gambar ketika ada teks di bawah gambar.

Glenn Plas

3

Coba kode ini, itu akan berfungsi untuk ikon kecil juga dengan bootstrap 4 karena tidak ada kelas pusat-blok bootstrap 4 jadi coba metode ini akan sangat membantu. Anda dapat mengubah posisi gambar dengan mengatur .col-md-12ke .col-md-8atau .col-md-4, terserah Anda.

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

3

Coba ini:

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

Luaskan cuplikan

Rafiqul Islam
sumber

3

Sederhananya semua gambar mini gambar di dalam baris / kolom div seperti ini:

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

dan semuanya akan bekerja dengan baik!

Rekayasa Tenaga
sumber

2

Untuk menambah jawaban yang sudah diberikan, mengatur img-responsivekombinasi dengan img-thumbnailakan diatur display: blockke display: inline block.

M. Oranje
sumber

2

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

.

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

pengguna956584
sumber

0

Anda dapat memperbaikinya dengan mendefinisikan margin: 0 otomatis

atau Anda dapat menggunakan col-md-offset juga

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

Luaskan cuplikan

Ganesh Putta
sumber

0

Cara yang lebih tepat diterapkan untuk semua objek Booostrap menggunakan kelas standar saja adalah dengan tidak mengatur margin atas dan bawah (karena gambar dapat mewarisi ini dari orangtua), jadi saya selalu menggunakan:

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

Saya juga telah membuat inti untuk itu, jadi jika ada perubahan akan berlaku karena bug, versi pembaruan akan selalu di sini: https://gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66

LordMagik
sumber

0

Sejauh ini tampaknya solusi terbaik untuk diterima <img class="center-block" ... />. Tapi tidak ada yang menyebutkan cara center-blockkerjanya.

Ambil Bootstrap v3.3.6 misalnya:

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

Nilai default dispalyuntuk <img>adalah inline. Nilai blockakan menampilkan elemen sebagai elemen blok (seperti <p>). Itu dimulai pada baris baru, dan mengambil seluruh lebar. Dengan cara ini, dua pengaturan margin membiarkan gambar tetap di tengah secara horizontal.

tengah lapangan
sumber

Bootstrap pusat penyelarasan gambar responsif 3

Jawaban: