วิธีจัดกึ่งกลางภาพโดยใช้ Text Align: กึ่งกลาง

องค์ประกอบเป็นองค์ประกอบแบบอินไลน์ (ค่าการแสดงผลของinline-block) สามารถจัดกึ่งกลางได้อย่างง่ายดายโดยการเพิ่มtext-align: center;คุณสมบัติ CSS ให้กับองค์ประกอบหลักที่มีอยู่

ในการจัดภาพโดยใช้text-align: center;คุณต้องวางด้านในขององค์ประกอบระดับบล็อกเช่นไฟล์div. เนื่องจากtext-alignคุณสมบัติที่จะใช้กับองค์ประกอบระดับบล็อกคุณวางองค์ประกอบห่อระดับบล็อกเพื่อให้บรรลุเป็นศูนย์กลางในแนวนอนtext-align: center;

ตัวอย่าง

   Center an Image using text align center  .img-container { text-align: center; } 

หมายเหตุ:องค์ประกอบหลักต้องเป็นองค์ประกอบบล็อก หากไม่ใช่องค์ประกอบบล็อกคุณควรเพิ่มdisplay: block;คุณสมบัติ CSS พร้อมกับtext-alignคุณสมบัติ

   Center an Image using text align center  .img-container { text-align: center; display: block; }      

การสาธิต: Codepen

พอดีกับวัตถุ

เมื่อรูปภาพของคุณอยู่ตรงกลางแล้วคุณอาจต้องการปรับขนาด object-fitระบุสถานที่ให้บริการตอบสนองต่อวิธีการที่องค์ประกอบความกว้าง / ความสูงของมันกล่องปกครอง

คุณสมบัตินี้สามารถใช้สำหรับรูปภาพวิดีโอหรือสื่ออื่น ๆ นอกจากนี้ยังสามารถใช้กับobject-positionคุณสมบัติเพื่อควบคุมวิธีการแสดงสื่อได้มากขึ้น

โดยทั่วไปเราใช้object-fitคุณสมบัติเพื่อกำหนดวิธีการยืดหรือบีบอัดสื่ออินไลน์

ไวยากรณ์

.element 

ค่า

  • fill: นี้เป็นค่าเริ่มต้น ปรับขนาดเนื้อหาให้ตรงกับกล่องหลักโดยไม่คำนึงถึงอัตราส่วนกว้างยาว
  • contain: ปรับขนาดเนื้อหาให้เต็มช่องหลักโดยใช้อัตราส่วนกว้างยาวที่ถูกต้อง
  • cover: คล้ายกับcontainแต่มักจะครอบตัดเนื้อหา
  • none: แสดงภาพในขนาดดั้งเดิม
  • scale-down: เปรียบเทียบความแตกต่างระหว่างnoneและcontainเพื่อหาขนาดวัตถุคอนกรีตที่เล็กที่สุด

ความเข้ากันได้ของเบราว์เซอร์

object-fitได้รับการสนับสนุนโดยส่วนใหญ่ของเบราว์เซอร์ที่ทันสมัยสำหรับการปรับปรุงข้อมูลมากที่สุดเกี่ยวกับความเข้ากันได้คุณสามารถตรวจสอบนี้ออก //caniuse.com/#search=object-fit

เอกสารประกอบ

  • จัดข้อความ - MDN
  • พอดีกับวัตถุ - MDN
  • - นพ