Görüntüyü div içinde yatay olarak ortala

Bu muhtemelen aptalca bir soru ama bir görüntüyü hizalamanın her zamanki yolları işe yaramadığından soracağımı düşündüm. Bir görüntüyü kapsayıcı div içinde nasıl hizalayabilir (yatay olarak)?

İşte HTML ve CSS. Küçük resmin diğer öğeleri için CSS'yi de ekledim. Azalan sırada çalışır, böylece en yüksek eleman her şeyin kabıdır ve en düşük eleman her şeyin içinde olur.

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

Tamam, PHP olmadan biçimlendirme ekledim bu yüzden görmek daha kolay olmalı. Her iki çözüm de pratikte işe yaramıyor gibi görünüyor. Üst ve alt kısımdaki metin ortalanamaz ve görüntü, kapsayıcı div içinde ortalanmalıdır. Kap taşması gizlendi, bu yüzden görüntünün merkezini normalde odak noktası olduğu gibi görmek istiyorum.

CSS Guy şunları önerir:

Yani, çeviri, belki:

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

İşte benim çözümüm: http://jsfiddle.net/marvo/3k3CC/2/

CSS flexbox bunu justify-content: centergörüntü üst öğesinde yapabilir. Görüntünün en boy oranını korumak için, görüntüye ekleyin align-self: flex-start;.

HTML

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

CSS

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

Çıktı:

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>

Bu çözümü W3 CSS sayfasında aşağıda buldum ve sorunumu yanıtladı.

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

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

Bu da yapardı

#imagewrapper {
    text-align:center
}

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

Bir görüntüyü veya herhangi bir öğeyi yatay olarak ortalamak için bulduğum en iyi şey (tüm tarayıcılarda çalışıyor gibi görünüyor) bir CSS sınıfı oluşturmak ve aşağıdaki parametreleri dahil etmektir:

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 */
}

Ardından, oluşturduğunuz CSS sınıfını etiketinize aşağıdaki gibi uygulayabilirsiniz:

HTML

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

Aşağıdakileri yaparak öğelerinizdeki CSS'yi de satır içine alabilirsiniz:

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

... ancak CSS'yi satır içi yazmanızı önermem çünkü stili değiştirmek istediğinizde merkezleme CSS kodunuzu kullanarak tüm etiketlerinizde birden çok değişiklik yapmanız gerekir.

Sonunda bunu yaptım:

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

Bu, görüntü yüksekliğini 600 piksel ile sınırlar ve orantıları koruyarak ana konteynere yatay olarak merkezlenir (veya ana genişlik daha küçükse yeniden boyutlandırılır).

Bir uzuv çıkacağım ve aşağıdaki şeylerin peşinde olduğunu söyleyeceğim.

Not, aşağıdaki soru yanlışlıkla yanlışlıkla atlandı inanıyorum (açıklamaya bakınız):

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

Yani ihtiyacınız olan şey:

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

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

Görüntüyü yatay olarak ortalamak için bu işe yarar:

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

Bunu CSS'nize ekleyin:

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

Sadece bu durumda görüntü olan bir alt öğeye başvurmak.

Sol ve sağ için eşit bir piksel dolgu koyun:

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

Resmi içine koyun newDiv. İçeriğin genişliğini divgörüntü ile aynı yapın. Uygula margin: 0 auto;için newDiv. Bu div, kabın içinde ortalanmalıdır .

Konumlandırmayı kullanın. Aşağıdakiler benim için çalıştı ... (Yatay ve Dikey Merkezli)

Görüntünün merkezine zum yaparak (görüntü bölmeyi doldurur):

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

Görüntünün merkezi (görüntü yok etmek zoom olmadan değil div doldurun):

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

esnek kutuyu kullanarak içeriğinizi minimum kodla hizalayabilirsiniz

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>

js keman bağlantısı https://jsfiddle.net/7un6ku2m/

Görüntüyü div içinde ortala

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

Birkaç yol denedim. Ama bu şekilde benim için mükemmel çalışıyor

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

Görüntüyü ortalamanın duyarlı bir yolu şöyle olabilir:

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

Bu satır içi (bir giriş kutusu kullanırken olduğu gibi) yapmak zorunda kalırsanız,
işte benim için çalışan hızlı bir kesmek:
bir div(style="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;
}

evet, bunun gibi kod iyi çalışıyor

<div>
 <img>
</div>

ama sadece hatırlatmak için, görüntü stili

object-fit : *depend on u*

bu yüzden son kod Örnek gibi

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

Flex özelliğini kap üzerinde kullanmak, hem dikey hem de yatay olarak ortalamak için doğru cevaptır.

Buradaki en önemli yanıt, bir öğeyi dikey olarak, yalnızca yatay olarak ortalamak için ÇALIŞMAZ.

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