วิธีจัดกึ่งกลางของภาพ (พื้นหลัง) ภายใน div ได้อย่างไร

เป็นไปได้ไหมที่จะจัดกึ่งกลางของภาพพื้นหลังใน div? ฉันลองทุกอย่างแล้ว - แต่ไม่สำเร็จ:

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

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

เป็นไปได้ไหม

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

ลอง background-position:center;

แก้ไข: เนื่องจากคำถามนี้ได้รับมุมมองมากมายจึงควรเพิ่มข้อมูลเพิ่มเติม:

text-align: center จะไม่ทำงานเพราะภาพพื้นหลังไม่ได้เป็นส่วนหนึ่งของเอกสารดังนั้นจึงไม่ได้เป็นส่วนหนึ่งของการไหล

background-position:centerคือชวเลขbackground-position: center center; ( background-position: horizontal vertical);

ใช้ตำแหน่งพื้นหลัง:

background-position: 50% 50%;

สำหรับศูนย์หรือการวางตำแหน่งภาพพื้นหลังคุณควรใช้background-positionคุณสมบัติ คุณสมบัติตำแหน่งพื้นหลังกำหนดตำแหน่งเริ่มต้นของภาพพื้นหลังจากtopและleftด้านข้างขององค์ประกอบ background-position : xvalue yvalue;ซีเอสเอไวยากรณ์

"xvalue" และ "yvalue" ค่าที่รองรับคือหน่วยความยาวเช่นpxและเปอร์เซ็นต์และชื่อทิศทางเช่นซ้าย, ขวาและอื่น ๆ

"xvalue" คือตำแหน่งแนวนอนของพื้นหลังและเริ่มจากด้านบนขององค์ประกอบ หมายความว่าถ้าคุณใช้50pxมันจะเป็น "50px" ห่างจากองค์ประกอบด้านบน และ "yvalue" เป็นตำแหน่งแนวตั้งที่มีเงื่อนไขเดียวกัน

ดังนั้นหากคุณใช้background-position: center;ภาพพื้นหลังจะอยู่กึ่งกลาง

แต่ฉันมักจะใช้รหัสนี้:

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

ฉันรู้ว่ามันสับสนมาก แต่มันหมายถึง:

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

และฉันก็รู้เช่นกันว่าbackground-sizeเป็นคุณสมบัติใหม่และในรหัสที่บีบอัดคืออะไร/coverแต่รหัสเหล่านี้หมายถึงfillการปรับขนาดพื้นหลังและการวางตำแหน่งในพื้นหลังเดสก์ทอปของ Windows

ท่านสามารถดูรายละเอียดเพิ่มเติมเกี่ยวกับการbackground-positionอยู่ในที่นี่และbackground-sizeในที่นี่

หากภาพพื้นหลังของคุณเป็นแผ่นสไปรต์ที่จัดเรียงตามแนวตั้งคุณสามารถจัดวางภาพพื้นหลังแต่ละอันในแนวนอนดังนี้:

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

หากภาพพื้นหลังของคุณเป็นแผ่นสไปรต์ที่จัดเรียงตามแนวนอนคุณสามารถจัดวางภาพพื้นหลังแต่ละแบบแนวตั้งดังนี้:

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

หากแผ่นงานสไปรต์ของคุณมีขนาดกะทัดรัดหรือคุณไม่ได้พยายามจัดกึ่งกลางภาพพื้นหลังของคุณในหนึ่งในสถานการณ์ที่กล่าวมาข้างต้นโซลูชันเหล่านี้จะไม่นำมาใช้

สิ่งนี้ใช้ได้กับฉัน:

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

สิ่งนี้ใช้ได้กับฉัน:

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

สิ่งนี้ใช้ได้กับฉัน:

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

สิ่งนี้ใช้ได้กับฉันสำหรับจัดแนวภาพให้อยู่กึ่งกลางของ div

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