Tengahkan gambar secara horizontal dalam div

Ini mungkin pertanyaan bodoh tapi karena cara biasa menyelaraskan gambar tidak berfungsi, saya pikir saya akan bertanya. Bagaimana saya bisa memusatkan menyelaraskan (secara horizontal) gambar di dalam wadahnya?

Inilah HTML dan CSS. Saya juga menyertakan CSS untuk elemen thumbnail lainnya. Ini berjalan dalam urutan menurun sehingga elemen tertinggi adalah wadah segalanya dan yang terendah ada di dalam segalanya.

#thumbnailwrapper {
      color: #2A2A2A;
      margin-right: 5px;
      border-radius: 0.2em;
      margin-bottom: 5px;
      background-color: #E9F7FE;
      padding: 5px;
      border: thin solid #DADADA;
      font-size: 15px
}
    
#artiststhumbnail {
      width: 120px;
      height: 108px;
      overflow: hidden;
      border: thin solid #DADADA;
      background-color: white;
}
    
#artiststhumbnail:hover {
      left: 50px
}

<!--link here-->

<a href="NotByDesign">
  <div id="thumbnailwrapper">

    <a href="NotByDesign">

      <!--name here-->
      <b>Not By Design</b>
      <br>

      <div id="artiststhumbnail">

        <a href="NotByDesign">

          <!--image here-->
          <img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
        </a>
      </div>

      <div id="genre">Punk</div>

  </div>

Oke, saya sudah menambahkan markup tanpa PHP jadi seharusnya lebih mudah dilihat. Tidak ada solusi yang tampaknya berhasil dalam praktik. Teks di atas dan bawah tidak bisa di tengah dan gambar harus di tengah di dalam wadah kontainernya. Wadah tersebut telah meluap tersembunyi sehingga saya ingin melihat bagian tengah gambar seperti biasanya di mana fokus berada.

CSS Guy menyarankan yang berikut:

Jadi, menerjemahkan, mungkin:

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

Inilah solusi saya di: http://jsfiddle.net/marvo/3k3CC/2/

CSS flexbox dapat melakukannya dengan justify-content: centerelemen induk gambar. Untuk mempertahankan rasio aspek gambar, tambahkan align-self: flex-start;ke dalamnya.

HTML

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

CSS

.image-container {
  display: flex;
  justify-content: center;
}

Keluaran:

body {
  background: lightgray;
}
.image-container {
  width: 200px;
  display: flex;
  justify-content: center;
  margin: 10px;
  padding: 10px;
  /* Material design properties */
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
  width: 500px;
  align-self: flex-start;  /* to preserve image aspect ratio */
}
.image-3 {
  width: 300px;
  align-self: flex-start;  /* to preserve image aspect ratio */
}

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

<div class="image-container image-2">
  <img src="http://placehold.it/100x100/333" />
</div>

<div class="image-container image-3">
  <img src="http://placehold.it/100x100/666" />
</div>

Saya baru saja menemukan solusi ini di bawah pada halaman W3 CSS dan itu menjawab masalah saya.

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

Sumber: http://www.w3.org/Style/Examples/007/center.en.html

Ini juga akan melakukannya

#imagewrapper {
    text-align:center
}

#imagewrapper img {
    display:inline-block;
    margin:0 5px
}

Hal terbaik yang saya temukan (yang tampaknya berfungsi di semua browser) untuk memusatkan gambar, atau elemen apa pun, secara horizontal adalah membuat kelas CSS dan menyertakan parameter berikut:

CSS

.center {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 50%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
}

Anda kemudian dapat menerapkan kelas CSS yang Anda buat ke tag Anda sebagai berikut:

HTML

<img class="center" src="image.jpg" />

Anda juga dapat inline CSS di elemen Anda dengan melakukan hal berikut:

<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />

... tapi saya tidak akan merekomendasikan menulis CSS sebaris karena Anda harus membuat beberapa perubahan di semua tag Anda menggunakan kode CSS pemusatan jika Anda ingin mengubah gaya.

Inilah yang akhirnya saya lakukan:

<div style="height: 600px">
   <img src="assets/zzzzz.png" alt="Error" style="max-width: 100%; 
        max-height: 100%; display:block; margin:auto;" />
</div>

Yang akan membatasi ketinggian gambar hingga 600px dan akan memusat secara horizontal (atau mengubah ukuran ke bawah jika lebar induk lebih kecil) ke wadah induk, dengan mempertahankan proporsi.

Saya akan pergi mengambil risiko dan mengatakan bahwa berikut ini adalah apa yang Anda cari.

Perhatikan, hal berikut yang saya yakini secara tidak sengaja dihilangkan dalam pertanyaan (lihat komentar):

<div id="thumbnailwrapper"> <!-- <<< This opening element -->
    <div id="artiststhumbnail">
...

Jadi yang Anda butuhkan adalah:

#artiststhumbnail {
    width:120px;
    height:108px;
    margin: 0 auto; /* <<< This line here. */
    ...
}

http://jsfiddle.net/userdude/XStjX/3/

Untuk memusatkan gambar secara horizontal, ini berfungsi:

<p style="text-align:center"><img src=""></p>

Tambahkan ini ke CSS Anda:

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

Hanya mereferensikan elemen anak yang dalam hal ini adalah gambar.

Letakkan padding piksel yang sama untuk kiri dan kanan:

<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">

Letakkan gambar di dalam a newDiv. Jadikan lebar yang mengandung divsama dengan gambar. Berlaku margin: 0 auto;untuk newDiv. Itu harus memusatkan divdalam wadah.

Gunakan penentuan posisi. Berikut ini berfungsi untuk saya ... (Horizontal dan Vertikal Berpusat)

Dengan zoom ke tengah gambar (gambar mengisi div):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

Tanpa memperbesar ke tengah gambar (gambar tidak mengisi div):

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

Anda dapat menyelaraskan konten Anda menggunakan kotak fleksibel dengan kode minimum

HTML

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

CSS

.image-container{
  width:100%;
  background:green;
  display:flex;

.image-container{
  width:100%;
  background:green;
  display:flex;
  justify-content: center;
  align-items:center;
}

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

tautan js fiddle https://jsfiddle.net/7un6ku2m/

Tengahkan gambar dalam div

/* standar */
div, .flexbox-div {
  position: relative;
  width: 100%;
  height: 100px;
  margin: 10px;
  background-color: grey;  
}

img {
  border: 3px solid red;
  width: 75px;
  height: 75px;
}
/* || standar */


/* transform */
.transform {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ 
}
/* || transform */


/* flexbox margin */
.flexbox-div {
  display: -webkit-flex;
  display: flex;
  background-color: lightgrey; 
}

.margin-img {
  margin: auto;
}
/* || flexbox margin */


/* flexbox justify align */
.flexbox-justify {
  justify-content: center;
}

.align-item {
  align-self: center;
}
/* || flexbox justify align */

<h4>Using transform </h4>  
<div>
  <img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox margin</h4>  
<div class="flexbox-div">
  <img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox justify align</h4>  
<div class="flexbox-div flexbox-justify">
  <img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

Saya sudah mencoba beberapa cara. Tapi cara ini sangat cocok untukku

<img src="~/images/btn.png" class="img-responsive" id="hide" style="display: block; margin-left: auto; margin-right: auto;" />

Cara responsif untuk memusatkan gambar bisa seperti ini:

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

Jika Anda harus melakukan inline ini (seperti ketika menggunakan kotak input),
berikut ini adalah peretasan cepat yang berfungsi untuk saya: kelilingi Anda (tautan gambar dalam kasus ini)
di divdenganstyle="text-align:center"

<div style="text-align:center">

<a title="Example Image: Google Logo" href="https://www.google.com/" 
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>

<h6><strong>This text will also be centered </strong></h6>

</div> /* ends centering style */

##Both Vertically and Horizontally center of the Page
.box{
    width: 300px;
    height: 300px;
    background-color: #232532;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

ya, kode seperti ini berfungsi dengan baik

<div>
 <img>
</div>

tetapi hanya untuk mengingatkan Anda, gaya untuk gambar

object-fit : *depend on u*

jadi kode akhir seperti Contoh

<div style="border: 1px solid red;">
    <img
      src="./assets/images/truck-toy.jpg"
      alt=""
      srcset=""
      style="
       border-radius: 50%;
       height: 7.5rem;
       width: 7.5rem;
       object-fit: contain;"
    />
</div>

Menggunakan properti flex pada wadah adalah jawaban yang tepat untuk dapat memusatkan secara vertikal DAN horizontal.

Jawaban teratas di sini TIDAK berfungsi untuk memusatkan suatu item secara vertikal, hanya secara horizontal.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">


      <style>
      body{
  /*-------------------important for fluid images---\/--*/
  overflow-x: hidden; /* some browsers shows it for mysterious reasons to me*/
  overflow-y: scroll;
  margin-left:0px;
  margin-top:0px;
  /*-------------------important for fluid images---/\--*/
      }
      .thirddiv{
      float:left;
      width:100vw;
      height:100vh;
      margin:0px;
      background:olive;
      }
      .thirdclassclassone{
      float:left;   /*important*/
      background:grey;
      width:80vw;
      height:80vh; /*match with img height bellow*/
      margin-left:10vw; /* 100vw minus "width"/2    */
      margin-right:10vw; /* 100vw minus "width"/2   */
      margin-top:10vh;
      }
      .thirdclassclassone img{
      position:relative; /*important*/
     display: block;  /*important*/
    margin-left: auto;  /*very important*/
    margin-right: auto;  /*very important*/
    height:80vh; /*match with parent div above*/

    /*--------------------------------
    margin-top:5vh;
    margin-bottom:5vh;
    ---------------------------------*/
    /*---------------------set margins to match total  height of parent di----------------------------------------*/
      }
    </style>           
</head>  
<body>
    <div class="thirddiv">
       <div class="thirdclassclassone">
       <img src="ireland.png">
    </div>      
</body>
</html>