วิธีจัดกึ่งกลางภาพในแนวตั้งและแนวนอนด้วย CSS

นักพัฒนาหลายคนต้องดิ้นรนขณะทำงานกับรูปภาพ การจัดการการตอบสนองและการจัดแนวมีความยากเป็นพิเศษโดยเฉพาะการจัดภาพให้อยู่กึ่งกลางตรงกลางหน้า

ดังนั้นในโพสต์นี้ฉันจะแสดงวิธีทั่วไปบางส่วนในการจัดกึ่งกลางภาพทั้งแนวตั้งและแนวนอนโดยใช้คุณสมบัติ CSS ที่แตกต่างกัน

ฉันได้ดูคุณสมบัติตำแหน่ง CSS และการแสดงผลในโพสต์ก่อนหน้าแล้ว หากคุณไม่คุ้นเคยกับคุณสมบัติเหล่านั้นขอแนะนำให้ตรวจสอบโพสต์เหล่านั้นก่อนอ่านบทความนี้

นี่คือเวอร์ชันวิดีโอหากคุณต้องการลองดู:

จัดกึ่งกลางภาพในแนวนอน

เริ่มต้นด้วยการจัดกึ่งกลางภาพในแนวนอนโดยใช้คุณสมบัติ CSS 3 แบบ

ข้อความ - จัดแนว

วิธีแรกในการจัดกึ่งกลางภาพในแนวนอนคือการใช้text-alignคุณสมบัติ อย่างไรก็ตามวิธีนี้ใช้ได้ผลก็ต่อเมื่อรูปภาพอยู่ในคอนเทนเนอร์ระดับบล็อกเช่น a :

 div { text-align: center; } 

ระยะขอบ: อัตโนมัติ

อีกวิธีหนึ่งในการจัดกึ่งกลางภาพคือการใช้margin: autoคุณสมบัติ (สำหรับระยะขอบซ้ายและขอบขวา)

อย่างไรก็ตามการใช้margin: autoเพียงอย่างเดียวจะใช้ไม่ได้กับรูปภาพ หากคุณจำเป็นต้องใช้margin: autoมีคุณสมบัติเพิ่มเติม 2 อย่างที่คุณต้องใช้เช่นกัน

คุณสมบัติ margin-auto ไม่มีผลกระทบใด ๆ กับองค์ประกอบระดับอินไลน์ เนื่องจากแท็กเป็นองค์ประกอบแบบอินไลน์เราจึงต้องแปลงเป็นองค์ประกอบระดับบล็อกก่อน:

img { margin: auto; display: block; }

ประการที่สองเราต้องกำหนดความกว้างด้วย ดังนั้นระยะขอบซ้ายและขวาสามารถใช้พื้นที่ว่างที่เหลือและจัดแนวเองโดยอัตโนมัติซึ่งจะใช้เคล็ดลับ (เว้นแต่เราจะให้ความกว้าง 100%):

img { width: 60%; margin: auto; display: block; }

จอแสดงผล: Flex

display: flexวิธีที่สามไปยังศูนย์ภาพในแนวนอนโดยใช้ เช่นเดียวกับที่เราใช้text-alignคุณสมบัติสำหรับคอนเทนเนอร์เราใช้display: flexสำหรับคอนเทนเนอร์เช่นกัน

อย่างไรก็ตามการใช้display: flexเพียงอย่างเดียวจะไม่เพียงพอ คอนเทนเนอร์ต้องมีคุณสมบัติเพิ่มเติมที่เรียกว่าjustify-content:

div { display: flex; justify-content: center; } img { width: 60%; }

justify-contentคุณสมบัติทำงานร่วมกับdisplay: flexที่เราสามารถใช้ในการจัดภาพในแนวนอน

สุดท้ายความกว้างของรูปภาพต้องน้อยกว่าความกว้างของคอนเทนเนอร์มิฉะนั้นจะใช้พื้นที่ 100% จากนั้นเราจะไม่สามารถจัดกึ่งกลางได้

สำคัญ:display: flexคุณสมบัติไม่สนับสนุนในรุ่นเก่าของเบราว์เซอร์ ดูรายละเอียดเพิ่มเติมได้ที่นี่

จัดกึ่งกลางภาพในแนวตั้ง

จอแสดงผล: Flex

สำหรับการจัดแนวแนวตั้งการใช้display: flexจะเป็นประโยชน์อีกครั้ง

ลองพิจารณากรณีที่คอนเทนเนอร์ของเรามีความสูง 800px แต่ความสูงของรูปภาพเพียง 500px:

div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }

ตอนนี้ในกรณีนี้การเพิ่มโค้ดบรรทัดเดียวลงในคอนเทนเนอร์align-items: centerจะทำเคล็ดลับ:

div { display: flex; justify-content: center; align-items: center; height: 800px; }

องค์ประกอบตำแหน่งคุณสมบัติสามารถในแนวตั้งถ้าใช้ร่วมกับalign-itemsdisplay: flex

ตำแหน่ง: Absolute & Transform Properties

อีกวิธีหนึ่งในการจัดแนวตั้งคือการใช้คุณสมบัติpositionและtransformร่วมกัน อันนี้ค่อนข้างซับซ้อนลองทำทีละขั้นตอน

ขั้นตอนที่ 1: กำหนดตำแหน่งที่แน่นอน

ประการแรกเราเปลี่ยนพฤติกรรมการวางตำแหน่งของภาพจากstaticเป็นabsolute:

div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }

นอกจากนี้ควรอยู่ในคอนเทนเนอร์ที่มีตำแหน่งค่อนข้างดังนั้นเราจึงเพิ่มลงposition: relativeในคอนเทนเนอร์ div

ขั้นตอนที่ 2: กำหนดคุณสมบัติด้านบนและด้านซ้าย

ประการที่สองเรากำหนดคุณสมบัติด้านบนและด้านซ้ายของรูปภาพและตั้งค่าเป็น 50% สิ่งนี้จะย้ายจุดเริ่มต้น (ซ้ายบน) ของรูปภาพไปที่กึ่งกลางของคอนเทนเนอร์:

img { width: 80%; position: absolute; top: 50%; left: 50%; }

ขั้นตอนที่ 3: กำหนดคุณสมบัติการแปลง

แต่ขั้นตอนที่สองได้ย้ายรูปภาพบางส่วนออกนอกคอนเทนเนอร์ เราจึงจำเป็นต้องนำมันกลับเข้าไปข้างใน

การกำหนดtransformคุณสมบัติและเพิ่ม -50% ให้กับแกน X และ Y ทำให้เคล็ดลับ:

img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

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

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาเว็บโปรดเยี่ยมชมช่อง Youtube ของฉันเพื่อดูข้อมูลเพิ่มเติม

ขอบคุณสำหรับการอ่าน!