วิธีการจัดตำแหน่งแนวตั้งทั้งหมดใน CSS จัดตำแหน่ง DIV ให้อยู่ตรงกลาง บล็อก div ไว้ตรงกลางหน้า

องค์ประกอบที่อยู่ตรงกลางใน CSS เป็นหนึ่งในเหตุผลที่ได้รับความนิยมมากที่สุดในการบ่นเกี่ยวกับ CSS - ทำไมทุกอย่างถึงซับซ้อนขนาดนี้? - พวกเขาไม่พอใจ สำหรับฉันดูเหมือนว่าปัญหาไม่ได้อยู่ที่ว่ามันทำยาก แต่มีหลายวิธีในการจัดองค์ประกอบให้อยู่ตรงกลาง และอาจเป็นเรื่องยากที่จะเลือกองค์ประกอบที่ถูกต้อง

มาจัดเรียงวิธีแก้ปัญหาที่เป็นไปได้ทั้งหมดในแผนภาพต้นไม้และหวังว่านี่จะทำให้งานของเราง่ายขึ้น

เลยต้องจัดองค์ประกอบให้อยู่ตรงกลาง...

การจัดตำแหน่งแนวนอน

การจัดองค์ประกอบอินไลน์ที่อยู่ตรงกลางภายในองค์ประกอบพาเรนต์ระดับบล็อกนั้นค่อนข้างง่าย:

Center-children ( text-align: center; )

สิ่งนี้จะใช้ได้กับ inline , inline-block , inline-table , inline-flex ฯลฯ

คุณสามารถจัดกึ่งกลางองค์ประกอบบล็อกได้โดยการตั้งค่าคุณสมบัติระยะขอบซ้ายและระยะขอบขวาเป็นอัตโนมัติ (ต้องมีการตั้งค่าความกว้างด้วย ไม่เช่นนั้นองค์ประกอบจะใช้ความกว้างทั้งหมดของเนื้อหา และไม่จำเป็นต้องจัดแนว) . ส่วนใหญ่มักจะทำโดยใช้คุณสมบัติชวเลข เช่นนี้

Center-me ( ระยะขอบ: 0 อัตโนมัติ; )

สิ่งนี้จะทำงานไม่ว่าความกว้างจะถูกตั้งค่าไว้ในองค์ประกอบบล็อกหรือพาเรนต์ก็ตาม

โปรดทราบว่าคุณจะไม่สามารถล้อมรอบองค์ประกอบที่จัดกึ่งกลางด้วยวิธีนี้ได้ อย่างไรก็ตามก็มีเคล็ดลับสำหรับเรื่องนี้เช่นกัน

การจัดตำแหน่งกึ่งกลางขององค์ประกอบบล็อกหลายรายการ

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

หากหลายบล็อกเหล่านี้อยู่บนบรรทัดต่างกัน เทคนิคการเยื้องอัตโนมัติยังคงใช้งานได้ดี:

การจัดตำแหน่งตามแนวตั้ง

การจัดตำแหน่งกึ่งกลางแนวตั้งใน CSS นั้นซับซ้อนกว่าเล็กน้อย

จัดกึ่งกลางสตริงหรือองค์ประกอบ string-*

การจัดองค์ประกอบด้วยบรรทัดเดียว

บางครั้งองค์ประกอบสตริง/ข้อความสามารถจัดให้อยู่กึ่งกลางได้เพียงเพราะว่ามีค่าเท่ากันสำหรับคุณสมบัติ padding-top และ padding-bottom

ลิงก์ ( padding-top: 30px; padding-bottom: 30px; )

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

เคล็ดลับข้อความตรงกลาง ( height: 100px; line-height: 100px; white-space: nowrap; )

การจัดองค์ประกอบหลายบรรทัด

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

ถ้ามันเหมือนกับโต๊ะบางทีคุณอาจใช้ Flexbox ก็ได้? องค์ประกอบ Flex เดียวสามารถจัดกึ่งกลางภายในคอนเทนเนอร์ Flex ได้อย่างง่ายดาย

Flex-center-vertical ( display: flex; justify-content: center; flex-direction: column; height: 400px; )

โปรดจำไว้ว่าสิ่งนี้มีความเกี่ยวข้องจริง ๆ เมื่อคอนเทนเนอร์มีความสูงคงที่ (px, % ฯลฯ) ซึ่งเป็นเหตุผลว่าทำไมคอนเทนเนอร์ที่นี่จึงมีความสูงที่กำหนด

หากไม่สามารถใช้ทั้งสองเทคนิคข้างต้นได้ คุณสามารถใช้เทคนิค "องค์ประกอบผี" โดยวางองค์ประกอบหลอกที่มีความสูง 100% ไว้ในคอนเทนเนอร์และจัดแนวในแนวตั้งให้ตรงกลาง

Ghost-center ( ตำแหน่ง: ญาติ; ) .ghost-center::before ( เนื้อหา: " "; จอแสดงผล: อินไลน์บล็อก ความสูง: 100% ความกว้าง: 1%; แนวตั้ง: กลาง; ) .ghost-center p ( จอแสดงผล: อินไลน์บล็อก; แนวตั้ง: กลาง; )

จัดชิดกึ่งกลางขององค์ประกอบบล็อก

จัดองค์ประกอบให้ตรงกับความสูงที่ทราบ

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

แต่ถ้าคุณทราบความสูงขององค์ประกอบ คุณสามารถจัดกึ่งกลางได้ดังนี้:

ผู้ปกครอง ( ตำแหน่ง: ญาติ; ) .child ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ความสูง: 100px; ระยะขอบด้านบน: -50px; /* บัญชีสำหรับการเติมและเส้นขอบหากไม่ได้ใช้ box-sizing: border-box; */ )

การจัดแนวองค์ประกอบด้วยความสูงที่ไม่ทราบ

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

ผู้ปกครอง ( ตำแหน่ง: ญาติ; ) .child ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; แปลงร่าง: แปล Y(-50%); )

แปลกใจเล็กน้อยที่สามารถทำได้ง่ายมากโดยใช้ Flexbox

ผู้ปกครอง ( display: flex; flex-direction: column; justify-content: center; )

การจัดตำแหน่งแนวนอนและแนวตั้ง

คุณสามารถผสมผสานเทคนิคที่นำเสนอข้างต้นเพื่อให้ได้องค์ประกอบที่อยู่กึ่งกลางที่สมบูรณ์แบบ แต่โดยปกติแล้วพวกเขาสามารถแบ่งออกเป็น 4 กลุ่ม:

การจัดองค์ประกอบให้มีความกว้างและความสูงคงที่

การใช้การลบ Maring เท่ากับครึ่งหนึ่งของความกว้างและความสูงนี้ หลังจากตำแหน่งสัมบูรณ์ขององค์ประกอบที่ 50%/50% จะทำให้องค์ประกอบอยู่ตรงกลาง วิธีนี้มีการสนับสนุนข้ามเบราว์เซอร์ที่ค่อนข้างดี:

ผู้ปกครอง ( ตำแหน่ง: ญาติ; ) .child ( ความกว้าง: 300px; ความสูง: 100px; การขยาย: 20px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ซ้าย: 50%; ระยะขอบ: -70px 0 0 -170px; )

การจัดแนวองค์ประกอบด้วยความกว้างและความสูงที่ไม่ทราบ

หากคุณไม่ทราบความกว้างหรือความสูงขององค์ประกอบ คุณสามารถใช้คุณสมบัติการแปลงและการแปลเชิงลบ 50% ในทั้งสองทิศทาง (ขึ้นอยู่กับความกว้าง/ความสูงปัจจุบันขององค์ประกอบ) ไปที่กึ่งกลาง:

ผู้ปกครอง ( ตำแหน่ง: ญาติ; ) .child ( ตำแหน่ง: สัมบูรณ์; บน: 50%; ซ้าย: 50%; แปลงร่าง: แปล(-50%, -50%); )

การจัดตำแหน่งองค์ประกอบโดยใช้ Flexbox

หากต้องการจัดกึ่งกลางองค์ประกอบโดยใช้ Flexbox คุณต้องใช้คุณสมบัติการจัดกึ่งกลางสองประการ:

ผู้ปกครอง ( display: flex; justify-content: center; align-items: center; )

การจัดตำแหน่งองค์ประกอบโดยใช้ CSS Grid

นี่เป็นเพียงเคล็ดลับเล็กๆ น้อยๆ (โพสต์โดย Lance Janssen) ที่ส่วนใหญ่จะใช้ได้กับองค์ประกอบเดียว:

เนื้อหา, html ( ความสูง: 100%; จอแสดงผล: ตาราง; ) span ( /* สิ่งที่อยู่ตรงกลาง */ ระยะขอบ: auto; )

บทสรุป

ตอนนี้คุณสามารถจัดกึ่งกลางอะไรก็ได้ใน CSS

การจัดองค์ประกอบในแนวนอนและแนวตั้งสามารถทำได้หลายวิธี การเลือกวิธีการขึ้นอยู่กับประเภทขององค์ประกอบ (บล็อกหรืออินไลน์) ประเภทของตำแหน่ง ขนาด ฯลฯ

1. การจัดตำแหน่งแนวนอนให้อยู่กึ่งกลางของบล็อก/หน้า

1.1. หากระบุความกว้างของบล็อก:

div ( width: 300px; ระยะขอบ: 0 auto; /*จัดกึ่งกลางองค์ประกอบในแนวนอนภายในบล็อกหลัก*/ )

หากคุณต้องการจัดแนวองค์ประกอบแบบอินไลน์ด้วยวิธีนี้ จะต้องตั้งค่าให้แสดง: block;

1.2. หากบล็อกซ้อนอยู่ในบล็อกอื่นและไม่ได้ระบุ/ระบุความกว้าง:

.wrapper(จัดแนวข้อความ: กึ่งกลาง;)

1.3. หากบล็อกมีความกว้างและจำเป็นต้องอยู่กึ่งกลางบล็อกหลัก:

.wrapper (ตำแหน่ง: สัมพันธ์; /*ตั้งค่าตำแหน่งสัมพัทธ์สำหรับบล็อกหลัก เพื่อให้เราสามารถวางตำแหน่งบล็อกไว้ข้างในได้อย่างแน่นอน*/) .box ( width: 400px; ตำแหน่ง: แน่นอน; ซ้าย: 50%; ระยะขอบซ้าย: -200px; / *เลื่อนบล็อกไปทางซ้ายเป็นระยะทางเท่ากับครึ่งหนึ่งของความกว้าง*/ )

1.4. หากบล็อกไม่ได้ระบุความกว้าง คุณสามารถจัดกึ่งกลางบล็อกได้โดยใช้บล็อกหลัก:

.wrapper (text-align: center; /*วางเนื้อหาของบล็อกไว้ตรงกลาง*/) .box ( display: inline-block; /*จัดเรียงบล็อกเป็นแถวแนวนอน*/ margin-right: -0.25em ; /*ลบช่องว่างระหว่างบล็อก*/ )

2. การจัดตำแหน่งในแนวตั้ง

2.1. หากข้อความครอบคลุมหนึ่งบรรทัด เช่น สำหรับปุ่มและรายการเมนู:

.button ( ความสูง: 50px; ความสูงบรรทัด: 50px; )

2.2. หากต้องการจัดแนวบล็อกในแนวตั้งภายในบล็อกหลัก:

.wrapper (ตำแหน่ง: สัมพันธ์;).box ( ความสูง: 100px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ระยะขอบ: -50px 0 0 0; )

2.3. การจัดแนวตั้งตามประเภทตาราง:

.wrapper ( จอแสดงผล: ตาราง; ความกว้าง: 100%; ) .box ( จอแสดงผล: ตารางเซลล์ ความสูง: 100px; การจัดแนวข้อความ: กึ่งกลาง; การจัดแนวแนวตั้ง: ตรงกลาง; )

2.4. หากบล็อกมีความกว้างและความสูงที่กำหนด และจำเป็นต้องอยู่กึ่งกลางบล็อกหลัก:

.wrapper ( ตำแหน่ง: ญาติ; ) .box ( ความสูง: 100px; ความกว้าง: 100px; ตำแหน่ง: สัมบูรณ์; บน: 0; ขวา: 0; ล่าง: 0; ซ้าย: 0; ระยะขอบ: อัตโนมัติ; ล้น: อัตโนมัติ; /*ถึง เนื้อหาไม่แพร่กระจาย */ )

2.5. ตำแหน่งที่แน่นอนที่กึ่งกลางของหน้า/บล็อกโดยใช้การแปลง CSS3:

หากมีการระบุมิติสำหรับองค์ประกอบ

div ( width: 300px; /*กำหนดความกว้างของบล็อก*/ height:100px; /*กำหนดความสูงของบล็อก*/ แปลงร่าง: แปล(-50%, -50%); ตำแหน่ง: สัมบูรณ์; ด้านบน: 50 %; เหลือ: 50% ;

หากองค์ประกอบไม่มีมิติและไม่ว่างเปล่า

ข้อความบางส่วนที่นี่

h1 ( ระยะขอบ: 0; แปลง: แปล (-50%, -50%); ตำแหน่ง: สัมบูรณ์; บน: 50%; ซ้าย: 50%; )

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

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

วิธีที่ 1

วิธีนี้ถือว่าเราตั้งค่าองค์ประกอบบางอย่าง

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

ข้อมูลที่เป็นประโยชน์บางอย่างที่ควรเป็นศูนย์กลาง
#wrapper ( จอแสดงผล: ตาราง; ) #cell ( จอแสดงผล: ตารางเซลล์; จัดแนวตั้ง: กลาง; )

ข้อดี

  • เนื้อหาสามารถเปลี่ยนความสูงแบบไดนามิกได้ (ความสูงไม่ได้กำหนดไว้ใน CSS)
  • เนื้อหาจะไม่ถูกตัดออกหากมีพื้นที่ไม่เพียงพอ

ข้อเสีย

  • ไม่ทำงานใน IE 7 หรือต่ำกว่า
  • แท็กที่ซ้อนกันจำนวนมาก

วิธีที่ 2

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

เนื่องจากความสูงได้รับการแก้ไขแล้ว คุณสามารถตั้งค่า overflow:auto; สำหรับ div ที่มีเนื้อหา ดังนั้นหากเนื้อหาไม่พอดี แถบเลื่อนจะปรากฏขึ้น

เนื้อหาที่นี่
#content ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ความสูง: 240px; ระยะขอบด้านบน: -120px; /* ลบครึ่งหนึ่งของความสูง */ )

ข้อดี

  • ทำงานได้ในทุกเบราว์เซอร์
  • ไม่มีการซ้อนโดยไม่จำเป็น

ข้อเสีย

  • เมื่อมีพื้นที่ไม่เพียงพอ เนื้อหาจะหายไป (เช่น div อยู่ภายในเนื้อหา และผู้ใช้ทำให้หน้าต่างเล็กลง ซึ่งในกรณีนี้แถบเลื่อนจะไม่ปรากฏขึ้น

วิธีที่ 3

ในวิธีนี้ เราจะล้อม div เนื้อหาด้วย div อื่น ตั้งค่าความสูงเป็น 50% (ความสูง: 50%;) และระยะขอบด้านล่างเป็นครึ่งหนึ่งของความสูง (margin-bottom:-contentheight;) เนื้อหาจะล้างโฟลตและอยู่ตรงกลาง

นี่คือเนื้อหา
#floater( float: left; height: 50%; margin-bottom: -120px; ) #content( clear: ทั้งสอง; ความสูง: 240px; ตำแหน่ง: สัมพันธ์; )

ข้อดี

  • ทำงานได้ในทุกเบราว์เซอร์
  • เมื่อมีพื้นที่ไม่เพียงพอ (เช่น เมื่อหน้าต่างลดลง) เนื้อหาจะไม่ถูกครอบตัด แถบเลื่อนจะปรากฏขึ้น

ข้อเสีย

  • ฉันคิดได้เพียงสิ่งเดียวเท่านั้น: มีการใช้องค์ประกอบว่างเพิ่มเติม

วิธีที่ 4.

วิธีนี้ใช้ตำแหน่ง: สัมบูรณ์; สำหรับ div ที่มีขนาดคงที่ (ความกว้างและความสูง) จากนั้นเราตั้งค่าพิกัดของมันไว้ด้านบน:0; ด้านล่าง:0; แต่เนื่องจากมีความสูงคงที่ จึงไม่ยืดออกและจัดชิดตรงกลาง ซึ่งคล้ายกับวิธีการที่รู้จักกันดีในการจัดกึ่งกลางองค์ประกอบบล็อกที่มีความกว้างคงที่ในแนวนอน (ระยะขอบ: 0 อัตโนมัติ;)

ข้อมูลสำคัญ.
#content( ตำแหน่ง: สัมบูรณ์; บน: 0; ล่าง: 0; ซ้าย: 0; ขวา: 0; ระยะขอบ: อัตโนมัติ; ความสูง: 240px; ความกว้าง: 70%; )

ข้อดี

  • ง่ายมาก

ข้อเสีย

  • ไม่ทำงานใน Internet Explorer
  • เนื้อหาจะถูกตัดออกโดยไม่มีแถบเลื่อนหากมีพื้นที่ในคอนเทนเนอร์ไม่เพียงพอ

วิธีที่ 5

เมื่อใช้วิธีการนี้ คุณสามารถจัดกึ่งกลางข้อความหนึ่งบรรทัดได้ เราเพียงแค่ตั้งค่าความสูงของข้อความ (line-height) เท่ากับความสูงขององค์ประกอบ (height) หลังจากนี้เส้นจะแสดงตรงกลาง

ข้อความบางบรรทัด
#content( ความสูง: 100px; ความสูงบรรทัด: 100px; )

ข้อดี

  • ทำงานได้ในทุกเบราว์เซอร์
  • ไม่ตัดข้อความหากไม่พอดี

ข้อเสีย

  • ใช้ได้กับข้อความเท่านั้น (ใช้ไม่ได้กับองค์ประกอบบล็อก)
  • หากมีข้อความมากกว่าหนึ่งบรรทัดจะดูแย่มาก

วิธีการนี้มีประโยชน์มากสำหรับองค์ประกอบขนาดเล็ก เช่น การจัดกึ่งกลางข้อความในปุ่มหรือช่องข้อความ

ตอนนี้คุณรู้วิธีจัดกึ่งกลางแนวตั้งแล้ว มาสร้างเว็บไซต์ง่ายๆ ที่จะมีลักษณะดังนี้:

ขั้นตอนที่ 1

เป็นการดีเสมอที่จะเริ่มต้นด้วยมาร์กอัปเชิงความหมาย เพจของเราจะมีโครงสร้างดังนี้:

  • #floater (เพื่อเนื้อหาตรงกลาง)
  • #centred (องค์ประกอบกลาง)
    • #ด้านข้าง
      • #โลโก้
      • #nav (รายการ
      • #เนื้อหา
    • #bottom (เพื่อลิขสิทธิ์และทั้งหมดนั้น)

    มาเขียนมาร์กอัป html ต่อไปนี้:

    บริษัทที่เป็นศูนย์กลาง

    ชื่อหน้า

    ปรับวิศวกรรมใหม่แบบองค์รวมเพื่อเพิ่มมูลค่าให้กับเอาท์ซอร์ส หลังจากการทำงานร่วมกันและการแบ่งปันแนวคิดโดยเน้นกระบวนการเป็นศูนย์กลาง

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

    ยอมรับความพร้อมของเว็บที่กำหนดเองอย่างมีประสิทธิภาพ แทนที่จะใช้กระบวนการที่ลูกค้ากำหนดทิศทางเอง มุ่งมั่นพัฒนาเทคโนโลยีเชิงรุกข้ามแพลตฟอร์มที่มีความต้องการข้ามแพลตฟอร์ม เพิ่มขีดความสามารถให้กับบริการเมตาของสหสาขาวิชาชีพอย่างสะดวกสบายโดยไม่ต้องใช้อินเทอร์เฟซทั่วทั้งองค์กร

    ปรับปรุงพื้นที่ธีมเชิงกลยุทธ์ที่มีการแข่งขันอย่างสะดวกด้วยตลาดอิเล็กทรอนิกส์ที่มุ่งเน้น รวบรวมชุมชนระดับโลกแบบเรืองแสงกับตลาดที่มีมูลค่าเพิ่ม สร้างสรรค์บริการแบบองค์รวมอย่างเหมาะสมก่อน e-services ที่แข็งแกร่ง

    ประกาศเกี่ยวกับลิขสิทธิ์อยู่ที่นี่

    ขั้นตอนที่ 2

    ตอนนี้เราจะเขียน CSS ที่ง่ายที่สุดเพื่อวางองค์ประกอบบนเพจ คุณควรบันทึกโค้ดนี้ไว้ในไฟล์ style.css ด้วยเหตุนี้เองที่ลิงก์ถูกเขียนในไฟล์ html

    Html, body ( margin: 0; padding: 0; height: 100%; ) body ( พื้นหลัง: url("page_bg.jpg") 50% 50% no-repeat #FC3; font-family: Georgia, Times, serifs; ) #floater ( ตำแหน่ง: ญาติ; ลอย: ซ้าย; ความสูง: 50%; ระยะขอบล่าง: -200px; ความกว้าง: 1px; ) #centered ( ตำแหน่ง: ญาติ; ชัดเจน: ซ้าย; ความสูง: 400px; ความกว้าง: 80%; สูงสุด -width: 800px; min-width: 400px; ระยะขอบ: 0 auto; border: 4px solid #666; ) #bottom ( ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 0; ขวา: 0; ) #nav ( ตำแหน่ง: สัมบูรณ์; ซ้าย: 0 ; ด้านล่าง: 0; การขยาย: 20px;

    ก่อนที่จะทำให้ศูนย์เนื้อหาของเราอยู่ในแนวเดียวกัน เราจำเป็นต้องตั้งค่าความสูงของเนื้อหาและ html เป็น 100% เนื่องจากความสูงถูกคำนวณโดยไม่มีช่องว่างภายในและภายนอก (ช่องว่างภายในและระยะขอบ) เราจึงตั้งค่า (ช่องว่างภายใน) เป็น 0 เพื่อไม่ให้มีแถบเลื่อน

    ระยะขอบด้านล่างสำหรับองค์ประกอบ "floater" เท่ากับลบครึ่งหนึ่งของความสูงของเนื้อหา (400px) ซึ่งก็คือ -200px ;

    ตอนนี้หน้าของคุณควรมีลักษณะดังนี้:

    เนื่องจากองค์ประกอบ #centered มีชุดตำแหน่ง:สัมพันธ์ เราจึงสามารถใช้การวางตำแหน่งที่แน่นอนขององค์ประกอบภายในได้ จากนั้นตั้งค่า overflow:auto; สำหรับองค์ประกอบ #content เพื่อให้แถบเลื่อนปรากฏขึ้นหากเนื้อหาไม่พอดี

    ขั้นตอนที่ 3

    สิ่งสุดท้ายที่เราจะทำคือเพิ่มสไตล์เพื่อทำให้เพจดูน่าสนใจยิ่งขึ้นอีกเล็กน้อย เริ่มจากเมนูกันก่อน

    #nav ul ( list-style: none; padding: 0; margin: 20px 0 0 0; text-indent: 0; ) #nav li ( padding: 0; margin: 3px; ) #nav li a ( จอแสดงผล: block; สีพื้นหลัง: #e8e8e8; ขอบล่าง: 1px solid: ขวา; เนื้อหา: """; น้ำหนักตัวอักษร: ตัวหนา; ลอย: ขวา; ขอบ: 0 2px 0 5px; f8f8f8; ขอบล่างสี : #777; ) #nav li a:hover::after ( ระยะขอบ: 0 0 0 7px; สี: #f93; ) #nav li a:active ( การขยาย: 8px 7px 6px 7px; )

    สิ่งแรกที่เราทำเพื่อทำให้เมนูดูดีขึ้นคือการลบสัญลักษณ์แสดงหัวข้อย่อยออกโดยการตั้งค่าแอตทริบิวต์ list-style:none และยังตั้งค่าช่องว่างภายในและช่องว่างภายใน เนื่องจากค่าเหล่านี้จะแตกต่างกันอย่างมากตามค่าเริ่มต้นในเบราว์เซอร์ที่แตกต่างกัน

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

    สิ่งที่น่าสนใจอีกอย่างที่เราใช้สำหรับเมนูคือ pseudo-classes:before และ:after ช่วยให้คุณสามารถเพิ่มบางสิ่งก่อนและหลังองค์ประกอบได้ นี่เป็นวิธีที่ดีในการเพิ่มไอคอนหรือสัญลักษณ์ เช่น ลูกศรที่ส่วนท้ายของแต่ละลิงก์ เคล็ดลับนี้ใช้ไม่ได้กับ Internet Explorer 7 และต่ำกว่า

    ขั้นตอนที่ 4

    และสุดท้ายแต่ไม่ท้ายสุด เราจะเพิ่มสกรูบางตัวในการออกแบบของเราเพื่อความสวยงามยิ่งขึ้น

    #centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( ตระกูลฟอนต์: Helvetica, Arial, sans- serif; ตัวอักษร-น้ำหนัก: ปกติ; สี: #666; ) h1 ( สี: #f93; ขอบล่าง: 1px solid #ddd; ระยะห่างระหว่างตัวอักษร: -0.05em; น้ำหนักตัวอักษร: ตัวหนา; ขอบบน: 0; ช่องว่างด้านบน: 0; ) #bottom (ช่องว่างภายใน: 10px; ขนาดตัวอักษร: 0.7em; สี: #f03; ) #logo ( ขนาดแบบอักษร: 2em; การจัดตำแหน่งข้อความ: กึ่งกลาง; สี: #999; ) #logo strong ( Font-weight: Normal; ) #logo span ( display: block; font-size: 4em; line-height: 0.7em; color: #666; ) p, h2, h3 ( line-height: 1.6em; ) ก ( สี: #f03; )

    ในรูปแบบเหล่านี้ เราได้ตั้งค่ามุมโค้งมนสำหรับองค์ประกอบ #centered ใน CSS3 สิ่งนี้จะกระทำโดยคุณสมบัติ border-radius คุณลักษณะนี้ยังไม่ได้นำมาใช้กับเบราว์เซอร์บางตัว นอกเหนือจากการใช้คำนำหน้า -moz และ -webkit สำหรับ Mozilla Firefox และ Safari/Webkit

    ความเข้ากันได้

    ดังที่คุณคงเดาได้แล้วว่าสาเหตุหลักของปัญหาความเข้ากันได้คือ Internet Explorer:

    • องค์ประกอบ #floater ต้องมีการตั้งค่าความกว้าง
    • IE 6 มีช่องว่างภายในเพิ่มเติมรอบเมนู

    เมื่อจัดวางหน้า มักจำเป็นต้องจัดกึ่งกลางโดยใช้วิธี CSS เช่น การจัดกึ่งกลางบล็อกหลัก มีหลายทางเลือกในการแก้ปัญหานี้ ซึ่งแต่ละตัวเลือกจะต้องถูกใช้โดยผู้ออกแบบโครงร่างไม่ช้าก็เร็ว

    การจัดตำแหน่งข้อความตรงกลาง

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

    • การจัดตำแหน่งข้อความ: กึ่งกลาง;

    ทรัพย์สินนี้ได้รับการสืบทอดและส่งต่อจากผู้ปกครองไปยังผู้สืบทอดทั้งหมด ไม่เพียงส่งผลต่อข้อความเท่านั้น แต่ยังส่งผลต่อองค์ประกอบอื่นๆ ด้วย เมื่อต้องการทำเช่นนี้ จะต้องเป็นแบบอินไลน์ (เช่น span) หรืออินไลน์บล็อก (บล็อกใดๆ ที่มีชุดคุณสมบัติ display: block) ตัวเลือกหลังยังช่วยให้คุณเปลี่ยนความกว้างและความสูงขององค์ประกอบและปรับการเยื้องได้อย่างยืดหยุ่นมากขึ้น

    บ่อยครั้งบนหน้าเว็บ การจัดตำแหน่งจะถูกกำหนดให้กับแท็กเอง สิ่งนี้จะทำให้โค้ดใช้ไม่ได้ทันที เนื่องจาก W3C ได้เลิกใช้แอตทริบิวต์ align แล้ว ไม่แนะนำให้ใช้บนเพจ

    การจัดแนวบล็อกให้อยู่ตรงกลาง

    หากคุณต้องการจัด div ให้อยู่ตรงกลาง CSS เสนอวิธีที่ค่อนข้างสะดวก: การใช้ระยะขอบ สามารถตั้งค่าการเยื้องสำหรับทั้งองค์ประกอบบล็อกและองค์ประกอบบล็อกอินไลน์ ค่าคุณสมบัติควรเป็น 0 (ช่องว่างภายในแนวตั้ง) และอัตโนมัติ (ช่องว่างภายในแนวนอนอัตโนมัติ):

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

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

    จัดแนวบล็อกไปทางซ้ายหรือขวา

    บางครั้งไม่จำเป็นต้องจัดแนวศูนย์กลาง CSS แต่คุณต้องวางบล็อกสองบล็อกเคียงข้างกัน: อันหนึ่งอยู่ที่ขอบด้านซ้ายและอีกอันอยู่ทางด้านขวา เพื่อจุดประสงค์นี้ มีคุณสมบัติ float ซึ่งสามารถรับค่าใดค่าหนึ่งจากสามค่าได้: ซ้าย ขวา หรือไม่มีเลย สมมติว่าคุณมีบล็อกสองบล็อกที่ต้องวางติดกัน จากนั้นโค้ดจะเป็นดังนี้:

    • .left (ลอย:ซ้าย;)
    • .right(ลอย:ขวา)

    หากมีบล็อกที่สามที่ควรอยู่ใต้สองบล็อกแรก (เช่น ส่วนท้าย) จะต้องระบุคุณสมบัติที่ชัดเจน:

    • .left (ลอย:ซ้าย;)
    • .right(ลอย:ขวา)
    • ส่วนท้าย (ชัดเจน: ทั้งสอง)

    ความจริงก็คือบล็อกที่มีคลาสซ้ายและขวาหลุดออกจากโฟลว์ทั่วไป นั่นคือองค์ประกอบอื่น ๆ ทั้งหมดจะเพิกเฉยต่อการมีอยู่ขององค์ประกอบที่อยู่ในแนวเดียวกัน คุณสมบัติ clear:both อนุญาตให้ส่วนท้ายหรือบล็อกอื่นใดมองเห็นองค์ประกอบที่หลุดออกจากโฟลว์ และห้ามไม่ให้ลอยทั้งซ้ายและขวา ดังนั้นในตัวอย่างของเรา ส่วนท้ายจะเลื่อนลง

    การจัดตำแหน่งตามแนวตั้ง

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

    • การจัดตำแหน่งด้านบน - .child(vertical-align:top);
    • การจัดตำแหน่งกึ่งกลาง - .child (แนวตั้ง: กลาง);
    • การจัดตำแหน่งด้านล่าง - .child(vertical-align:bottom);

    ทั้งการจัดข้อความและแนวตั้งไม่ส่งผลต่อองค์ประกอบบล็อก

    ปัญหาที่อาจเกิดขึ้นกับบล็อกที่เรียงกัน

    บางครั้งการวาง div ไว้ตรงกลางโดยใช้ CSS อาจทำให้เกิดปัญหาเล็กน้อยได้ ตัวอย่างเช่น เมื่อใช้ float: สมมติว่ามีสามบล็อก: .first, .second และ .third บล็อกที่สองและสามอยู่ในบล็อกแรก องค์ประกอบที่มีคลาสที่สองจัดชิดซ้าย และบล็อกสุดท้ายจัดชิดขวา หลังจากปรับระดับแล้ว ทั้งคู่ก็หลุดออกจากกระแส หากองค์ประกอบหลักไม่ได้ตั้งค่าความสูงไว้ (เช่น 30em) องค์ประกอบนั้นจะไม่ขยายไปจนถึงความสูงของบล็อกลูกอีกต่อไป เพื่อหลีกเลี่ยงข้อผิดพลาดนี้ ให้ใช้ "spacer" ซึ่งเป็นบล็อกพิเศษที่เห็น .second และ .third รหัสซีเอสเอส:

    • .วินาที(ลอย:ซ้าย)
    • .third(ลอย:ขวา)
    • .clearfix(height:0; clear: ทั้งสอง;)

    pseudo-class:after มักใช้ ซึ่งช่วยให้คุณสามารถคืนบล็อกไปยังตำแหน่งเดิมได้ด้วยการสร้าง pseudo-spacer (ในตัวอย่าง div ที่มีคลาสคอนเทนเนอร์จะอยู่ภายใน.first และมี.left และ.right) : :

    • .left(ลอย:ซ้าย)
    • .right(ลอย:ขวา)
    • .container:after(content:""; display:table; clear:both;)

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

    ปัญหาอีกประการหนึ่งที่ผู้ออกแบบโครงร่างมักพบคือการจัดตำแหน่งขององค์ประกอบบล็อกอินไลน์ ช่องว่างจะถูกเพิ่มโดยอัตโนมัติหลังจากแต่ละรายการ คุณสมบัติมาร์จิ้นซึ่งถูกกำหนดให้เป็นการเยื้องติดลบ ช่วยในการรับมือกับสิ่งนี้ มีวิธีอื่นที่ใช้ไม่บ่อยนัก เช่น การกำหนดให้เป็นศูนย์ ในกรณีนี้ ขนาดตัวอักษร: 0 จะถูกเขียนในคุณสมบัติขององค์ประกอบหลัก หากมีข้อความอยู่ภายในบล็อก ขนาดตัวอักษรที่ต้องการจะถูกส่งกลับในคุณสมบัติขององค์ประกอบบล็อกอินไลน์แล้ว ตัวอย่างเช่น ขนาดตัวอักษร:1em วิธีนี้ไม่สะดวกเสมอไปดังนั้นจึงมักใช้ตัวเลือกที่มีการเยื้องภายนอกบ่อยกว่ามาก

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

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

    เริ่มจากคำอธิบายทั่วไปของปัญหากันก่อน

    ปัญหาการจัดกึ่งกลางแนวตั้ง

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

    คนส่วนใหญ่ เมื่อใช้คุณสมบัติ text-align: ให้อ้างอิงถึงคุณสมบัติการจัดแนวตั้งสำหรับการจัดกึ่งกลางแนวตั้ง ทุกอย่างดูค่อนข้างสมเหตุสมผล หากคุณเคยใช้เทมเพลตตาราง คุณอาจใช้แอตทริบิวต์ valign อย่างกว้างขวาง ซึ่งตอกย้ำความเชื่อที่ว่าการจัดแนวตั้งเป็นวิธีที่ถูกต้องในการแก้ปัญหา

    แต่แอตทริบิวต์ valign ใช้งานได้กับเซลล์ตารางเท่านั้น และคุณสมบัติการจัดแนวแนวตั้งก็คล้ายกันมาก นอกจากนี้ยังส่งผลต่อเซลล์ตารางและองค์ประกอบแบบอินไลน์บางส่วนด้วย

    ค่าของคุณสมบัติการจัดแนวแนวตั้งจะสัมพันธ์กับองค์ประกอบอินไลน์พาเรนต์

    • ในบรรทัดข้อความ การจัดตำแหน่งจะสัมพันธ์กับความสูงของบรรทัด
    • เซลล์ตารางใช้การจัดตำแหน่งที่สัมพันธ์กับค่าที่คำนวณโดยอัลกอริทึมพิเศษ (โดยปกติคือความสูงของแถว)

    แต่น่าเสียดายที่คุณสมบัติการจัดแนวแนวตั้งใช้ไม่ได้กับองค์ประกอบระดับบล็อก (เช่น ย่อหน้าภายในองค์ประกอบ div) สถานการณ์นี้อาจทำให้ใครๆ คิดว่าไม่มีทางแก้ไขปัญหาการจัดแนวแนวตั้งได้

    แต่มีวิธีอื่นในการจัดองค์ประกอบบล็อกให้อยู่ตรงกลาง ซึ่งทางเลือกนั้นขึ้นอยู่กับสิ่งที่อยู่ตรงกลางซึ่งสัมพันธ์กับคอนเทนเนอร์ด้านนอก

    วิธีเส้นความสูง

    วิธีนี้ใช้ได้ผลเมื่อคุณต้องการจัดข้อความหนึ่งบรรทัดให้อยู่กึ่งกลางในแนวตั้ง สิ่งที่คุณต้องทำคือตั้งค่าความสูงของบรรทัดให้ใหญ่กว่าขนาดตัวอักษร

    ตามค่าเริ่มต้น พื้นที่สีขาวจะกระจายเท่ากันที่ด้านบนและด้านล่างของข้อความ และเส้นจะตั้งกึ่งกลางแนวตั้ง บ่อยครั้งความสูงของเส้นจะเท่ากับความสูงขององค์ประกอบ

    HTML:

    ข้อความที่จำเป็น

    ซีเอสเอส:

    #child ( ความสูงบรรทัด: 200px; )

    วิธีนี้ใช้ได้กับทุกเบราว์เซอร์ แม้ว่าจะสามารถใช้ได้เพียงบรรทัดเดียวเท่านั้น ค่า 200 px ในตัวอย่างถูกเลือกโดยพลการ คุณสามารถใช้ค่าใดก็ได้ที่ใหญ่กว่าขนาดแบบอักษรของข้อความ

    การจัดกึ่งกลางภาพโดยใช้ Line-Height

    แล้วถ้าเนื้อหาเป็นรูปภาพล่ะ? วิธีการข้างต้นจะได้ผลหรือไม่? คำตอบอยู่ในโค้ด CSS อีกหนึ่งบรรทัด

    HTML:

    ซีเอสเอส:

    #parent ( line-height: 200px; ) #parent img ( จัดแนวตั้ง: ตรงกลาง; )

    ค่าของคุณสมบัติ line-height ต้องมากกว่าความสูงของรูปภาพ

    วิธีการตาราง CSS

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

    บันทึก:ตาราง CSS ไม่เหมือนกับตาราง HTML

    HTML:

    เนื้อหา

    ซีเอสเอส:

    #parent (จอแสดงผล: ตาราง;) #child ( จอแสดงผล: table-cell; แนวตั้ง: กลาง; )

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

    ในกรณีนี้ เนื้อหาอาจเป็นไดนามิกได้ ซึ่งต่างจากวิธีการข้างต้น เนื่องจากองค์ประกอบ div จะเปลี่ยนขนาดตามเนื้อหา

    ข้อเสียของวิธีนี้คือใช้ไม่ได้กับ IE เวอร์ชันเก่า คุณต้องใช้คุณสมบัติ display: inline-block สำหรับคอนเทนเนอร์ที่ซ้อนกัน

    ตำแหน่งที่แน่นอนและระยะขอบติดลบ

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

    โค้ดตัวอย่างดำเนินการจัดกึ่งกลางแนวนอนและแนวตั้งในเวลาเดียวกัน:

    HTML:

    เนื้อหา

    ซีเอสเอส:

    #parent (ตำแหน่ง: ญาติ;) #child ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ซ้าย: 50%; ความสูง: 30%; ความกว้าง: 50%; ระยะขอบ: -15% 0 0 -25%; )

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

    วิธีการนี้ใช้ไม่ได้กับทุกเบราว์เซอร์

    ตำแหน่งและการยืดตัวที่แน่นอน

    โค้ดตัวอย่างดำเนินการจัดกึ่งกลางแนวตั้งและแนวนอน

    HTML:

    เนื้อหา

    ซีเอสเอส:

    #parent (ตำแหน่ง: ญาติ;) #child ( ตำแหน่ง: สัมบูรณ์; บน: 0; ล่าง: 0; ซ้าย: 0; ขวา: 0; ความกว้าง: 50%; ความสูง: 30%; ระยะขอบ: อัตโนมัติ; )

    แนวคิดเบื้องหลังวิธีนี้คือการขยายองค์ประกอบที่ซ้อนกันออกไปจนครบ 4 ขอบขององค์ประกอบหลักโดยการตั้งค่าคุณสมบัติด้านบน ล่าง ขวา และซ้ายเป็น 0

    การตั้งค่าระยะขอบให้สร้างอัตโนมัติทุกด้านจะตั้งค่าเท่ากันทั้ง 4 ด้าน และจัดองค์ประกอบ div ที่ซ้อนกันไว้ตรงกลางบนองค์ประกอบหลัก

    ขออภัย วิธีนี้ใช้ไม่ได้กับ IE7 และต่ำกว่า

    ช่องว่างด้านบนและด้านล่างเท่ากัน

    ในวิธีนี้ ระยะห่างจากขอบที่เท่ากันจะถูกตั้งค่าไว้อย่างชัดเจนด้านบนและด้านล่างองค์ประกอบหลัก

    HTML:

    เนื้อหา

    ซีเอสเอส:

    #parent (ช่องว่างภายใน: 5% 0; ) #child (ช่องว่างภายใน: 10% 0; )

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

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

    ตัวอย่างเช่น หากองค์ประกอบหลักมีความสูง 400px และองค์ประกอบที่ซ้อนกันคือ 100px ก็จำเป็นต้องมีช่องว่างภายใน 150px ที่ด้านบนและด้านล่าง

    150 + 150 + 100 = 400

    การใช้ % ช่วยให้คุณสามารถปล่อยให้การคำนวณอยู่ที่เบราว์เซอร์ได้

    วิธีนี้ใช้ได้ผลทุกที่ ข้อเสียคือความจำเป็นในการคำนวณ

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

    div แบบลอยตัว

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

    HTML:

    เนื้อหา

    ซีเอสเอส:

    #parent (ความสูง: 250px;) #floater ( float: left; ความสูง: 50%; ความกว้าง: 100%; ขอบล่าง: -50px; ) #child ( ชัดเจน: ทั้งสอง; ความสูง: 100px; )

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

    เนื่องจาก div นี้ลอยอยู่ จึงถูกลบออกจากโฟลว์ปกติของเอกสาร และเราจำเป็นต้องแกะข้อความบนองค์ประกอบที่ซ้อนกัน ตัวอย่างใช้ clear: ทั้งสองอย่าง แต่ก็เพียงพอแล้วที่จะใช้ทิศทางเดียวกันกับออฟเซ็ตขององค์ประกอบ div ว่างแบบลอยตัว

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

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

    บทสรุป

    วิธีการทั้งหมดที่อธิบายไว้นั้นใช้งานง่าย ปัญหาคือไม่มีอันใดที่เหมาะกับทุกกรณี คุณต้องวิเคราะห์โครงการและเลือกโครงการที่เหมาะสมกับความต้องการมากที่สุด