Pusatkan gambar menggunakan pusat pelurusan teks?

Apakah properti text-align: center;itu cara yang baik untuk memusatkan gambar menggunakan CSS?

img {
    text-align: center;
}

Itu tidak akan berfungsi karena text-alignproperti berlaku untuk memblokir kontainer, bukan elemen inline, dan imgmerupakan elemen inline. Lihat spesifikasi W3C .

Gunakan ini sebagai gantinya:

img.center {
    display: block;
    margin: 0 auto;
}

<div style="border: 1px solid black;">
<img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

Itu tidak selalu berhasil ... jika tidak, coba:

img {
    display: block;
    margin: 0 auto;
}

Saya menemukan posting ini , dan itu berhasil untuk saya:

img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div style="border: 1px solid black; position:relative; min-height: 200px">
  <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">

</div>

(Penjajaran vertikal dan horisontal)

Cara lain untuk melakukannya adalah memusatkan paragraf terlampir:

<p style="text-align:center; border:1px solid black"><img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"></p>

Anda dapat melakukan:

<center><img src="..." /></center>

Sebenarnya, satu-satunya masalah dengan kode Anda adalah bahwa text-alignatribut berlaku untuk teks (ya, gambar dihitung sebagai teks) di dalam tag. Anda akan ingin menempatkan spantag di sekitar gambar dan mengatur nya gaya text-align: center, sebagai begitu:

span.centerImage {
     text-align: center;
}

<span class="centerImage"><img src="http://placehold.it/60/60" /></span>

Gambar akan dipusatkan. Menanggapi pertanyaan Anda, ini adalah cara termudah dan paling mudah untuk memusatkan gambar, selama Anda ingat untuk menerapkan aturan pada gambar yang mengandung span(atau div).

Ada tiga metode untuk memusatkan elemen yang dapat saya sarankan:

1. Menggunakan text-alignproperti

       .parent {
       text-align: center;
   }

       <div class="parent">
       <img src="https://placehold.it/60/60" />
   </div>

   Jalankan cuplikan kodeSembunyikan hasil

   Luaskan cuplikan

2. Menggunakan marginproperti

   img {
       display: block;
       margin: 0 auto;
   }

   <img src="https://placehold.it/60/60" />

   Jalankan cuplikan kodeSembunyikan hasil

   Luaskan cuplikan

3. Menggunakan positionproperti

   img {
       display: block;
       position: relative;
       left: -50%;
   }
   .parent {
       position: absolute;
       left: 50%;
   }

   <div class="parent">
       <img src="https://placehold.it/60/60" />
   </div>

   Jalankan cuplikan kodeSembunyikan hasil

   Luaskan cuplikan

Metode pertama dan kedua hanya berfungsi jika induk setidaknya selebar gambar. Ketika gambar lebih lebar dari induknya, gambar tidak akan tetap berada di tengah !!!

Tetapi: Metode ketiga adalah cara yang baik untuk itu!

Ini sebuah contoh:

img {
    display: block;
    position: relative;
    left: -50%;
}
.parent {
    position: absolute;
    left: 50%;
}

<div class="parent">
    <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/img_01.jpg" />
</div>

Hanya jika Anda perlu mendukung versi Internet Explorer kuno.

Pendekatan modern dilakukan margin: 0 autodi CSS Anda.

Contoh di sini: http://jsfiddle.net/bKRMY/

HTML:

<p>Hello the following image is centered</p>
<p class="pic"><img src="https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"/></p>
<p>Did it work?</p>

CSS:

p.pic {
    width: 48px;
    margin: 0 auto;
}

Satu-satunya masalah di sini adalah bahwa lebar paragraf harus sama dengan lebar gambar . Jika Anda tidak meletakkan lebar pada paragraf, itu tidak akan berfungsi, karena akan menganggap 100% dan gambar Anda akan disejajarkan ke kiri, kecuali tentu saja Anda gunakan text-align:center.

Cobalah biola dan bereksperimenlah dengannya jika Anda mau.

img{
    display: block;
    margin-right: auto;
    margin-left: auto;      
 }

Jika Anda menggunakan kelas dengan gambar maka yang berikut akan dilakukan

class {
    display: block;
    margin: 0 auto;
}

Jika hanya gambar di kelas tertentu yang ingin Anda luruskan tengah maka yang berikut akan dilakukan:

class img {
    display: block;
    margin: 0 auto;
}

Pada wadah yang menyimpan gambar, Anda dapat menggunakan CSS 3 Flexbox untuk memusatkan gambar di dalamnya dengan sempurna, baik secara vertikal maupun horizontal.

Anggap Anda memiliki <div class = "container"> sebagai pemegang gambar:

Maka sebagai CSS Anda harus menggunakan:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

Dan ini akan membuat semua konten Anda di dalam div ini terpusat dengan sempurna.

Solusi paling sederhana yang saya temukan adalah menambahkan ini ke elemen img saya:

style="display:block;margin:auto;"

Sepertinya saya tidak perlu menambahkan "0" sebelum "otomatis" seperti yang disarankan oleh orang lain. Mungkin itu cara yang tepat, tetapi berfungsi cukup baik untuk tujuan saya tanpa "0" juga. Setidaknya di Firefox, Chrome, dan Edge terbaru .

Cukup ganti induk induk :)

Coba yang ini pada properti induk:

text-align:center

Anda dapat menggunakan text-align: centerpada induk dan mengubah imgke display: inline-block→ karena itu berperilaku seperti elemen teks dan akan dipusatkan jika induk memiliki lebar!

img {
    display: inline-block
}

Saya akan menggunakan div untuk memusatkan menyelaraskan gambar. Seperti dalam:

<div align="center"><img src="your_image_source"/></div>

Jika Anda ingin mengatur gambar sebagai latar belakang, saya punya solusi:

.image {
    background-image: url(yourimage.jpg);
    background-position: center;
}

Untuk memusatkan gambar non-latar belakang tergantung pada apakah Anda ingin menampilkan gambar sebagai inline (perilaku default) atau elemen blok.

Kasus inline

Jika Anda ingin mempertahankan perilaku default properti CSS tampilan gambar, Anda harus membungkus gambar Anda di dalam elemen blok lain yang harus Anda atur text-align: center;

Kasus blok

Jika Anda ingin menganggap gambar sebagai elemen blok sendiri, maka text-alignproperti tidak masuk akal, dan Anda harus melakukan ini sebagai gantinya:

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

Jawaban untuk pertanyaan Anda:

Apakah properti text-align: center; cara yang baik untuk memusatkan gambar menggunakan CSS?

Iya dan tidak.

• Ya, jika gambar adalah satu-satunya elemen di dalam bungkusnya.
• Tidak, jika Anda memiliki elemen lain di dalam pembungkus gambar karena semua elemen anak-anak yang merupakan saudara kandung gambar akan mewarisi text-alignproperti: dan mungkin Anda tidak akan menyukai efek samping ini.

Referensi

1. Daftar elemen sebaris
2. Hal-hal keterpusatan

Satu lagi cara untuk mengukur - tampilkan:

img {
  width: 60%; /* Or required size of image. */
  margin-left: 20% /* Or scale it to move image. */
  margin-right: 20% /* It doesn't matters much if using left and width */
}

Gunakan ini untuk imgCSS Anda :

img {
  margin-right: auto;
  margin-left: auto;
}

display: blockdengan margin: 0tidak bekerja untuk saya, juga tidak membungkus dengan text-align: centerelemen.

Ini solusi saya:

img.center {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
}

translateX didukung oleh sebagian besar browser

Saya menemukan bahwa jika saya memiliki gambar dan beberapa teks di dalam div, maka saya dapat menggunakantext-align:center untuk menyelaraskan teks dan gambar dalam satu gerakan.

HTML:

    <div class="picture-group">
        <h2 class="picture-title">Picture #1</h2>
        <img src="http://lorempixel.com/99/100/" alt="" class="picture-img" />
        <p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p>
    </div>

CSS:

.picture-group {
  border: 1px solid black;
  width: 25%;
  float: left;
  height: 300px;
  #overflow:scroll;
  padding: 5px;
  text-align:center;
}

CodePen: https://codepen.io/artforlife/pen/MoBzrL?editors=1100

Terkadang kami langsung menambahkan konten dan gambar pada administrator WordPress di dalam halaman. Ketika kami menyisipkan gambar di dalam konten dan ingin menyelaraskan pusat itu. Kode ditampilkan sebagai:

 **<p><img src="https://abcxyz.com/demo/wp-content/uploads/2018/04/1.jpg" alt=""></p>**

Dalam hal ini Anda dapat menambahkan konten CSS seperti ini:

article p img{
    margin: 0 auto;
    display: block;
    text-align: center;
    float: none;
}

Menggunakan:

<dev class="col-sm-8" style="text-align: center;"><img src="{{URL('image/car-trouble-with-clipping-path.jpg')}}" ></dev>

Saya pikir ini adalah cara untuk memusatkan gambar dalam kerangka Laravel.

.img-container {
  display: flex;
}

img {
  margin: auto;
}

ini akan membuat pusat gambar secara vertikal dan horizontal