Metin hizalama merkezi kullanarak görüntüyü ortala?

Mülkiyet text-align: center;bir resmi CSS kullanarak ortalamak için iyi bir yol mu?

img {
    text-align: center;
}

Bu text-alignözellik, satır içi öğelere değil, satır kaplarına uygulandığı ve imgsatır içi bir öğe olduğu için çalışmaz . W3C teknik özelliklerine bakın .

Bunun yerine şunu kullanın:

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>

Bu her zaman işe yaramaz ... eğer işe yaramazsa, şunu deneyin:

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

Ben rastladım bu yazı , ve benim için çalıştı:

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>

(Dikey ve yatay hizalama)

Bunu yapmanın başka bir yolu da ekteki paragrafı ortalamak olacaktır:

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

Yapabilirsin:

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

Aslında, kodunuzdaki tek sorun, text-alignözelliğin etiketin içindeki metne (evet, resimler metin olarak sayılır) uygulanmasıdır. spanGörüntünün çevresine bir etiket koymak ve stilini şu şekilde ayarlamak istersiniz text-align: center:

span.centerImage {
     text-align: center;
}

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

Görüntü ortalanacaktır. Sorunuza yanıt olarak, kuralı görüntünün içeren span(veya div) öğesine uygulamayı hatırladığınız sürece, görüntüleri ortalamanın en kolay ve en kusursuz yoludur .

Önerebileceğim bir öğeyi ortalamak için üç yöntem vardır:

1. kullanılması text-alignözelliği

       .parent {
       text-align: center;
   }

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

   Kod snippet'ini çalıştırSonuçları gizle

   Snippet'i genişlet

2. kullanılması marginözelliği

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

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

   Kod snippet'ini çalıştırSonuçları gizle

   Snippet'i genişlet

3. kullanılması positionözelliği

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

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

   Kod snippet'ini çalıştırSonuçları gizle

   Snippet'i genişlet

Birinci ve ikinci yöntemler yalnızca üst öğe görüntü kadar genişse çalışır. Görüntü üst öğesinden daha geniş olduğunda görüntü ortada kalmaz !!!

Ancak: Üçüncü yöntem bunun için iyi bir yoldur!

İşte bir örnek:

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>

Yalnızca Internet Explorer'ın eski sürümlerini desteklemeniz gerekiyorsa.

Modern yaklaşım margin: 0 autoCSS'nizde yapmaktır .

Burada örnek: 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;
}

Buradaki tek sorun , paragrafın genişliğinin görüntünün genişliği ile aynı olması gerektiğidir . Paragraf üzerine bir genişlik koymazsanız, çalışmaz, çünkü% 100 olduğu varsayılır ve elbette kullanmadığınız sürece görüntünüz sola hizalanır text-align:center.

Kemanı deneyin ve isterseniz deneyin.

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

Görüntü içeren bir sınıf kullanıyorsanız, aşağıdakiler yapılacaktır

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

Yalnızca belirli bir sınıftaki hizalamayı ortalamak istediğiniz bir görüntü ise aşağıdakiler yapılır:

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

Kapsayıcı görüntüsünde görüntüyü hem dikey hem de yatay olarak mükemmel bir şekilde ortalamak için bir CSS 3 Flexbox kullanabilirsiniz.

Görüntü tutucu olarak <div class = "container"> olduğunu varsayalım:

Sonra CSS olarak kullanmanız gerekir:

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

Bu da div içindeki tüm içeriğinizi mükemmel bir şekilde ortalayacak.

Bulduğum en basit çözüm bunu img-elementime eklemekti:

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

Başkaları tarafından önerilen "otomatik" önce "0" eklemek gerekmez gibi görünüyor. Belki de bu doğru yoldur, ama "0" olmadan da benim amacım için yeterince iyi çalışıyor. En azından en yeni Firefox, Chrome ve Edge'de .

Üst hizalamayı değiştirin :)

Bunu üst özelliklerde deneyin:

text-align:center

Sen kullanabilirsiniz text-align: centerebeveyn ve değiştirmek imgiçin display: inline-blockbu nedenle bir metin elemanı gibi davranır ve ebeveyn bir genişliğe sahipse merkezli olacak olan →!

img {
    display: inline-block
}

Bir görüntüyü ortalamak için bir div kullanırdım. De olduğu gibi:

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

Görüntüyü arka plan olarak ayarlamak istiyorsanız, bir çözümüm var:

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

Merkeze bir sigara arkaplan görüntüsü bir satır içi (varsayılan davranış) olarak resim veya blok elemanı görüntülemek isteyip bağlıdır.

Satır içi

Görüntünün görüntü CSS özelliğinin varsayılan davranışını korumak istiyorsanız, görüntünüzü ayarlamanız gereken başka bir blok öğesinin içine sarmanız gerekir. text-align: center;

Blok örneği

Görüntüyü kendi başına bir blok öğesi olarak değerlendirmek istiyorsanız, text-alignözellik bir anlam ifade etmez ve bunun yerine bunu yapmalısınız:

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

Sorunuzun cevabı:

Özellik text-align: center; CSS kullanarak bir görüntüyü ortalamanın iyi bir yolu nedir?

Evet ve hayır.

• Görüntü, sarmalayıcının içindeki tek öğeyse evet.
• Hayır, görüntünün sarıcısının içinde başka öğeler varsa, görüntünün kardeşleri olan tüm alt öğeler text-alignözelliği devralır : ve bu yan etkiyi beğenmeyebilirsiniz.

Referanslar

1. Satır içi öğelerin listesi
2. Bir şeyleri merkezleme

Ölçeklendirmenin bir yolu daha - görüntülemek:

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

Bunu imgCSS'niz için kullanın :

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

display: blockile margin: 0bir benim için işe yaramadı, ne sarma text-align: centerelemanı.

Bu benim çözümüm:

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

translateX çoğu tarayıcı tarafından desteklenir

Eğer içinde bir resim ve bir metin varsa div, o zaman kullanabilirsiniztext-align:center , metni ve görüntüyü tek bir geçişte hizalamak için .

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

Bazen içeriği ve görüntüleri doğrudan sayfaların içindeki WordPress yöneticisine ekleriz. Görüntüleri içeriğin içine eklediğimizde ve o merkeze hizalamak istediğimizde. Kod şu şekilde görüntülenir:

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

Bu durumda, aşağıdaki gibi CSS içeriği ekleyebilirsiniz:

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

kullanın:

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

Bence bu görüntüyü Laravel çerçevesinde ortalamanın yolu.

.img-container {
  display: flex;
}

img {
  margin: auto;
}

bu görüntü merkezini hem dikey hem de yatay olarak yapar