(Arka plan) bir görüntü div içinde nasıl ortalanır?

Arka plan resmini div'de ortalamak mümkün mü? Hemen hemen her şeyi denedim - ama başarı yok:

<div id="doit">
  Lorem Ipsum ...
</div>

//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }

Mümkün mü?

#doit {
    background: url(url) no-repeat center;
}

Deneyin background-position:center;

DÜZENLEME: Bu soru çok sayıda görüntüleme aldığından, ekstra bilgi eklemeye değer:

text-align: center arka plan görüntüsü belgenin bir parçası olmadığından ve bu nedenle akışın bir parçası olmadığından çalışmaz.

background-position:centerkısaltmasıdır background-position: center center; ( background-position: horizontal vertical);

Arka plan konumunu kullan:

background-position: 50% 50%;

Arka plan resmini ortalamak veya konumlandırmak için background-positionözelliği kullanmalısınız . Background-position özelliği başlatılmasını arka plan resmi konumunu belirler topve leftelemanın tarafını. CSS Sözdizimi background-position : xvalue yvalue;.

"xvalue" ve "yvalue" destekli değerler, gibi uzunluk birimleri pxve sol, sağ vb. yüzde ve yön adlarıdır.

"Xvalue", arka planın yatay konumudur ve öğenin üstünden başlar. Bu, kullanırsanız 50pxöğelerin üstünden "50 piksel" uzakta olacağı anlamına gelir . Ve "yvalue" aynı koşula sahip dikey konumdur.

Yani background-position: center;arka plan görüntünüzü kullanırsanız ortalanacaktır.

Ama ben her zaman bu kodu kullanın:

.yourclass {
  background: url(image.png) no-repeat center /cover;
 }

Çok kafa karıştırıcı olduğunu biliyorum ama şu anlama geliyor:

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

Ve ben de background-sizeyeni bir özellik olduğunu ve sıkıştırılmış kod ne olduğunu biliyorum /coverama bu kodları fillarka plan boyutlandırma ve windows masaüstü arka planda konumlandırma anlamına gelir .

Sen hakkında daha fazla ayrıntı görebilirsiniz background-positioniçinde burada ve background-sizede burada .

Arka plan resminiz dikey olarak hizalanmış hareketli grafik sayfasıysa, her hareketli grafiği yatay olarak şu şekilde ortalayabilirsiniz:

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: 50% [y position of sprite];
}

Arka plan resminiz yatay olarak hizalanmış bir hareketli grafik sayfasıysa, her hareketli grafiği dikey olarak ortalayabilirsiniz:

#doit {
    background-image: url('images/pic.png'); 
    background-repeat: none;
    background-position: [x position of sprite] 50%;
}

Hareketli grafik sayfanız kompaktsa veya arka plan resminizi yukarıda belirtilen senaryolardan birinde ortalamaya çalışmıyorsanız, bu çözümler geçerli değildir.

Bu benim için çalışıyor:

#doit{
    background-image: url('images/pic.png');
    background-repeat: no-repeat;
    background-position: center;  
}  

Bu benim için çalışıyor:

.network-connections-icon {
  background-image: url(url);
  background-size: 100%;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}

Bu benim için çalışıyor:

<style>
   .WidgetBody
        {   
            background: #F0F0F0;
            background-image:url('images/mini-loader.gif');
            background-position: 50% 50%;            
            background-repeat:no-repeat;            
        }
</style>        

Bu benim için imajı div'ın merkezine hizalamak için işe yarar.

.yourclass {
  background-image: url(image.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}