วิธีจัดองค์ประกอบ div ให้อยู่กึ่งกลางในแนวตั้งสำหรับเบราว์เซอร์ทั้งหมดโดยใช้ CSS

ในการพัฒนาเว็บไซต์ การสร้างเค้าโครงขององค์ประกอบอย่างถูกต้องเป็นสิ่งสำคัญอย่างยิ่ง อย่างไรก็ตาม คุณสมบัติ CSS หลายอย่าง เช่น CSS3 Flexible Box มีประโยชน์สำหรับการปรับเค้าโครงของหน้าเว็บและองค์ประกอบ HTML Flexible Box ใช้เพื่อจัดเรียงเว็บเพจและแอปพลิเคชันในลักษณะเรียกซ้ำ โหมด Flexbox นี้ช่วยสร้างเค้าโครงสำหรับเว็บเพจและแอปพลิเคชันที่ซับซ้อน

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

วิธีจัดตำแหน่งองค์ประกอบ div โดยใช้ CSS

องค์ประกอบ div สามารถจัดแนวในแนวตั้งได้โดยใช้คุณสมบัติการแสดงผล ' ดิ้น ” พร้อมกับ CSS “ จัดรายการ ” ทรัพย์สิน และ “ ปรับเนื้อหา ' คุณสมบัติ. คุณสมบัติ 'จัดตำแหน่งรายการ' จัดตำแหน่งองค์ประกอบในแนวตั้ง และคุณสมบัติ 'ปรับเนื้อหาให้เหมาะสม' จัดตำแหน่งเนื้อหาในแนวนอน

ตัวอย่าง: จะจัดองค์ประกอบ div ในแนวตั้งด้วย CSS ได้อย่างไร

ใน HTML ก่อนอื่นให้เพิ่ม '

” องค์ประกอบและกำหนดคลาส “ เนื้อหาหลัก '. ระหว่างแท็ก “

” ให้เพิ่ม “ ” องค์ประกอบที่มีคุณสมบัติดังต่อไปนี้:

---

---

• “ src แอตทริบิวต์ ” ใช้เพื่อระบุ URL ของรูปภาพ
• “ ทุกอย่าง ” แอตทริบิวต์กำหนดข้อความบางส่วนที่จะแสดงแทนรูปภาพหากโหลดไม่สำเร็จ
• “ ความกว้าง แอตทริบิวต์ ” ใช้เพื่อปรับความกว้างของรูปภาพ
• จากนั้นเพิ่ม “

  ” องค์ประกอบเพื่อฝังย่อหน้าลงในหน้า

นี่คือรหัส HTML:

< แผนก ระดับ = 'เนื้อหาหลัก' >
< img src = '/images/laptop-notepad.jpg' ทุกอย่าง = 'แล็ปท็อปพร้อมกระดาษโน้ตและปากกา' ความกว้าง = '300' >
< หน้า > แล็ปท็อปเป็นคอมพิวเตอร์แบบพกพาหรือที่เรียกว่า เช่น คอมพิวเตอร์โน้ตบุ๊ก หน้า >
แผนก >

ใน CSS เราจะระบุคุณสมบัติการกำหนดรูปแบบต่างๆ ให้กับ div

สไตล์คลาส 'เนื้อหาหลัก'

.เนื้อหาหลัก {
ความสูง: ห้าสิบ % ;
สีพื้นหลัง: #46C2CB;
ขนาดตัวอักษร: 24px;
ช่องว่างภายใน: 10px;
}

คุณสมบัติ CSS ต่อไปนี้ถูกกำหนดไว้ใน ' เนื้อหาหลัก ' ระดับ:

• “ ความสูง คุณสมบัติ ” ใช้เพื่อปรับความสูงของคอนเทนเนอร์
• “ สีพื้นหลัง ” กำหนดสีพื้นหลังขององค์ประกอบ
• “ ขนาดตัวอักษร ” ระบุขนาดตัวอักษรขององค์ประกอบ
• “ การขยายความ คุณสมบัติ ” กำหนดพื้นที่รอบเนื้อหาขององค์ประกอบ

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

ไปข้างหน้าเพื่อใช้คุณสมบัติ CSS ที่ช่วยจัดกึ่งกลางของ '

” องค์ประกอบในแนวตั้ง เพิ่มคุณสมบัติเหล่านี้ในคลาส “ เนื้อหาหลัก ” ที่ใช้ในการเข้าถึง

องค์ประกอบ:

แสดง: ดิ้น ;
จัดรายการ: ศูนย์;

นี่คือคำอธิบาย:

• “ แสดง ' คุณสมบัติ ' ดิ้น ” ใช้เพื่อทำให้เค้าโครง div ยืดหยุ่นตามองค์ประกอบ
• “ จัดรายการ ” คุณสมบัติ CSS ถูกตั้งค่าเป็น “ ศูนย์กลาง ” ซึ่งจะจัดตำแหน่งองค์ประกอบ div ในแนวตั้ง

เอาต์พุต

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

บทสรุป

หากต้องการให้องค์ประกอบ div อยู่กึ่งกลางแนวตั้ง CSS “ แสดง ” คุณสมบัติใช้กับ “ ดิ้น ' ค่า. ค่านี้ทำให้คอนเทนเนอร์

มีความยืดหยุ่นตามองค์ประกอบ หากต้องการจัดตำแหน่งองค์ประกอบ div ในแนวตั้ง ให้ปรับ ' จัดรายการ ” คุณสมบัติและกำหนดให้เป็น “ ศูนย์กลาง ' ค่า. บล็อกนี้แสดงวิธีใช้ CSS เพื่อจัดองค์ประกอบ div ตรงกลางในแนวตั้งในเบราว์เซอร์ทั้งหมด