วลาด เมอร์เซวิช

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

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

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

ตัวอย่างที่ 1: การจัดกึ่งกลางภาพวาด

การจัดตำแหน่งตาราง ( ความกว้าง: 100%; /* ความกว้างของตาราง */ ความสูง: 100%; /* ความสูงของตาราง */ )

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

หากต้องการตั้งค่าความสูงของตารางเป็น 100% คุณต้องลบออก รหัสจะใช้ไม่ได้อีกต่อไป

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

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

โดยการรวมแอตทริบิวต์การจัดตำแหน่ง (การจัดตำแหน่งแนวนอน) และการจัดตำแหน่ง ( การจัดตำแหน่งตามแนวตั้ง) แท็ก อนุญาตให้ตั้งค่าตำแหน่งขององค์ประกอบหลายประเภทที่สัมพันธ์กัน ในรูป รูปที่ 1 แสดงวิธีจัดองค์ประกอบในแนวนอน

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

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

เพื่อระบุการจัดตำแหน่งบนสุดของเนื้อหาเซลล์สำหรับแท็ก คุณต้องตั้งค่าแอตทริบิวต์ valign ด้วยค่าด้านบน (ตัวอย่างที่ 2)

ตัวอย่างที่ 2: การใช้ valign

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

คอลัมน์ 1

คอลัมน์ 2

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

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

ตัวอย่างที่ 3: การใช้สไตล์เพื่อการจัดตำแหน่ง

คอลัมน์ 1

คอลัมน์ 2

Alignment TABLE ( width: 100%; /* ความกว้างของตาราง */ ) #col1 ( ความกว้าง: 75%; /* ความกว้างคอลัมน์แรก */ พื้นหลัง: #f0f0f0; /* สีพื้นหลังคอลัมน์แรก */ ) #col2 ( ความกว้าง: 25 %; /* ความกว้างของคอลัมน์ที่สอง */ พื้นหลัง: #col1, #col2 ( แนวตั้ง: top ; / * การจัดตำแหน่งด้านบน */ ช่องว่างภายใน: 5px /* ระยะขอบรอบเนื้อหาเซลล์ */ )

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

การจัดตำแหน่งด้านล่างเสร็จสิ้นในลักษณะเดียวกัน แต่แทนที่จะใช้ค่าบนสุด จะใช้ด้านล่างแทน

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

วิธีการดั้งเดิม

การจัดตำแหน่ง เช่น เมื่อวางสูตรดังแสดงในรูปที่ 1 2.

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

(18.6)

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

ตัวอย่างที่ 4: การจัดตำแหน่งสูตร

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

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

เส้นขอบที่มองไม่เห็น

และสองคอลัมน์ คอลัมน์ด้านซ้ายจะมีข้อความ และคอลัมน์ด้านขวาจะมีช่องข้อความ (ตัวอย่างที่ 5)

ตัวอย่างที่ 5: การจัดแนวเขตข้อมูลแบบฟอร์ม
การจัดตำแหน่ง
ชื่อ

ในตัวอย่างนี้ สำหรับเซลล์ที่ต้องการการจัดตำแหน่งที่ถูกต้อง จะมีการเพิ่มแอตทริบิวต์ align="right"

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

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

หน้าของเราประกอบด้วยสี่ช่วงตึก: ส่วนหัว เมนู เนื้อหา และส่วนท้าย หากต้องการจัดกึ่งกลางหน้า เราจะรวมสี่บล็อกเหล่านี้ไว้ในบล็อกหลักเดียว:

ส่วนหัวของไซต์

เนื้อหา

ด้านล่างของไซต์

เราจะพิจารณาหลายตัวเลือกโดยใช้โครงสร้างนี้เป็นตัวอย่าง

เค้าโครงและการจัดกึ่งกลางของไซต์ยาง เมื่อจัดวางหน้ายาง หน่วยวัดหลักที่ใช้คือ -% เนื่องจากหน้างานควรยืดออกไปตามความกว้างและครอบครองพื้นที่ทั้งหมด.

พื้นที่ว่าง

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

หากต้องการให้บล็อก "เมนู" และ "เนื้อหา" วางติดกัน ให้บล็อก "เมนู" ลอยและดันไปที่ขอบด้านซ้าย เราจะตั้งค่าสีพื้นหลังสำหรับบล็อกของเราด้วย ตอนนี้เรามาเขียนทั้งหมดนี้ในสไตล์ชีต (บนหน้า style.css)

#header( พื้นหลัง:#3e4982; width:100%; height:110px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( พื้นหลัง:#6173cb; float :left; width:300px; text-align:center; font-size:18px; #content(พื้นหลัง:#ffffff; ขอบซ้าย:30% ; ความสูง:300px; text-align:center; ) #footer( พื้นหลัง: #3e4982; clear:both; width:100%; height:50px; text-align:center; color:#FFFFFF;

ความสูงของบล็อกถูกตั้งค่าตามเงื่อนไขเพื่อให้มองเห็นผลลัพธ์ได้ ดูหน้าของเราในเบราว์เซอร์ของคุณ:

... #menu( พื้นหลัง:#6173cb; float:left; width:200px; height:300px; ) #content( พื้นหลัง:#ffffff; margin-left:200px; height:300px; ) ...

ตอนนี้เพจของเราขยายออกอย่างเป็นธรรมชาติมากขึ้น ที่ เค้าโครงยางหน้ากระดาษจะกินพื้นที่เต็มความกว้างของหน้าจอ ดังนั้นจึงไม่จำเป็นต้องจัดตำแหน่งหน้ากระดาษ

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

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

เค้าโครงและการจัดกึ่งกลางของไซต์ ความกว้างคงที่

ในกรณีนี้เราจะต้องถาม ขนาดคงที่บล็อกของเรา:

#main( width:800px; ) #header( พื้นหลัง:#3e4982; width:800px; height:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu ( พื้นหลัง:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( พื้นหลัง:#ffffff; ขอบซ้าย:200px; ความสูง:300px; text-align:center; ) #footer( พื้นหลัง:#3e4982; clear:both; width:800px; height:50px; text-align:center; color:#FFFFFF; font- ขนาด:14px; padding-top:10px;

ตอนนี้เพจของเราถูกกดไปที่ขอบซ้ายของหน้าจอ

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

มาทำสิ่งนี้: กำหนดให้แท็ก "body" มีความกว้าง 800 พิกเซล (เช่น บล็อก "main") และเว้นระยะห่างจากขอบด้านซ้าย 50% จากนั้นเนื้อหาทั้งหมดของบล็อก "หลัก" จะปรากฏทางด้านขวาของหน้าจอ (เช่น จากตรงกลางไปขวา):

เพื่อให้บล็อก "หลัก" ของเราตั้งอยู่ตรงกลางหน้าจอ ตรงกลางของบล็อกจะต้องตรงกับตรงกลางของแท็ก "body" เหล่านั้น. คุณต้องเลื่อนบล็อก "หลัก" ไปทางซ้ายครึ่งหนึ่งของขนาด ความกว้างของบล็อก "main" คือ 800 พิกเซล ซึ่งหมายความว่าคุณต้องตั้งค่าคุณสมบัติ "margin-left:-400px" ให้กับบล็อกนั้น ใช่ คุณสมบัตินี้สามารถรับค่าลบได้ จากนั้นระยะขอบด้านซ้ายจะลดลง (เช่น เลื่อนไปทางซ้าย) และนี่คือสิ่งที่เราต้องการ

ตอนนี้สไตล์ชีตมีลักษณะดังนี้:

body( width:800px; padding-left:50%; ) #main( width:800px; margin-left:-400px; ) #header( พื้นหลัง:#3e4982; width:800px; height:150px; text-align:center ; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( พื้นหลัง:#6173cb; float:left; width:200px; ความสูง:300px; text-align:center; color:#FFFFFF; ขนาดตัวอักษร:18px; padding-top:10px; ) #content( พื้นหลัง:#ffffff; margin-left:200px; height:300px; text-align:center; ) #footer( พื้นหลัง:#3e4982; clear:both; ความกว้าง:800px;text-align:center;font-size:14px;

และหน้าของเราในเบราว์เซอร์ตั้งอยู่ตรงกลาง:

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

ขอให้โชคดีในภารกิจสร้างสรรค์ของคุณ!

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

เริ่มต้นด้วย คำอธิบายทั่วไปงาน

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

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

คนส่วนใหญ่ใช้ คุณสมบัติการจัดแนวข้อความ: เข้าถึงคุณสมบัติการจัดแนวแนวตั้งเพื่อจัดกึ่งกลางแนวตั้ง ทุกอย่างดูค่อนข้างสมเหตุสมผล หากคุณใช้เทมเพลตตาราง คุณอาจใช้แอตทริบิวต์ 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 ว่างเพิ่มเติม และความรู้เกี่ยวกับความสูงขององค์ประกอบที่ซ้อนกัน

บทสรุป

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

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

ข้อดีของการจัดวางโดยใช้แท็ก

โครงสร้างเว็บไซต์มีสองประเภทหลัก:

• ตาราง;
• ปิดกั้น.

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

เมื่อใช้เค้าโครงตาราง หน้าเว็บจะไม่แสดงจนกระทั่ง โหลดเต็ม- ขณะที่ใช้บล็อก div องค์ประกอบต่างๆ จะแสดงทันที

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

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

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

เครื่องช่วยจัดตำแหน่ง

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

• ซ้าย – จัดองค์ประกอบให้ชิดขอบซ้ายของหน้าจอ การไหลรอบองค์ประกอบที่เหลือเกิดขึ้นทางด้านขวา
• ขวา – การจัดตำแหน่งทางด้านขวา ไหลไปรอบๆ องค์ประกอบอื่นๆ – ทางด้านซ้าย
• ไม่มี – ไม่อนุญาตให้ห่อ
• inherit – สืบทอดค่าขององค์ประกอบหลัก

มาดูตัวอย่างเล็กๆ น้อยๆ ของการวางตำแหน่ง div โดยใช้คุณสมบัตินี้:

#left ( ความกว้าง: 200px; ความสูง: 100px; float: ซ้าย; พื้นหลัง: rgb(255,51,102); ) #right ( ความกว้าง: 200px; ความสูง: 100px; float: ขวา; พื้นหลัง: rgb(0,255,153); ) บล็อกด้านซ้าย บล็อคขวา

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

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

จัดชั้นให้อยู่ตรงกลาง

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

#container ( ความกว้าง: 600px; ระยะขอบ: 0 อัตโนมัติ; ) #left ( ความกว้าง: 200px; ความสูง: 100px; float: left; พื้นหลัง: rgb(255,51,102); ) #right ( ความกว้าง: 200px; ความสูง: 100px; float : ซ้าย; พื้นหลัง: rgb(0,255,153); #center ( กว้าง: 200px; ความสูง: 100px; ลอย: ซ้าย; พื้นหลัง: rgb(255,0,0); ) บล็อกซ้าย บล็อกกลาง บล็อกขวา

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

หลังจากการเปลี่ยนแปลง บล็อกทั้งหมดจะเรียงกันเป็นแถวตรงกลาง และตำแหน่งจะไม่เปลี่ยนแปลงไม่ว่าหน้าต่างเบราว์เซอร์จะมีขนาดเท่าใดก็ตาม การจัดกึ่งกลาง div ในแนวตั้งมีลักษณะดังนี้:

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

#container ( ความกว้าง: 450px; ความสูง: 150px; ระยะขอบ: 0 อัตโนมัติ; สีพื้นหลัง: #66CCFF; ) #left ( ความกว้าง: 100px; ความสูง: 100px; พื้นหลัง: rgb (255,51,102); จอแสดงผล: อินไลน์บล็อก; แนวตั้ง: กลาง; ขอบซ้าย: 35px; ) #right ( ความกว้าง: 100px; ความสูง: 100px; พื้นหลัง: rgb(0,255,153); จอแสดงผล: อินไลน์บล็อก; แนวตั้ง: กลาง; ขอบซ้าย: 35px; ) #center ( ความกว้าง: 100px; ความสูง: 100px; พื้นหลัง: rgb(255,0,0); จอแสดงผล: บล็อกอินไลน์; จัดแนวตั้ง: กลาง; ระยะขอบซ้าย: 35px; )

คำอธิบายสั้น ๆ เกี่ยวกับคุณสมบัติ CSS และค่าที่เราใช้ในตัวอย่างนี้เพื่อจัดกึ่งกลาง div ภายใน div:

• display: inline-block – จัดองค์ประกอบบล็อกให้เป็นบรรทัดและทำให้แน่ใจว่าองค์ประกอบนั้นล้อมรอบองค์ประกอบอื่น
• แนวตั้งจัด: กลาง – จัดองค์ประกอบที่อยู่ตรงกลางสัมพันธ์กับผู้ปกครอง;
• ขอบซ้าย – กำหนดระยะขอบซ้าย

วิธีสร้างลิงค์จากเลเยอร์

ฟังดูแปลกๆ แต่นี่เป็นไปได้ บางครั้งอาจจำเป็นต้องใช้บล็อก div เป็นลิงก์ในระหว่างเลย์เอาต์ ประเภทต่างๆเมนู. ลองพิจารณาดู ตัวอย่างการปฏิบัติการใช้งานเลเยอร์ลิงก์:

#layer1( width: 500px; height: 100px; พื้นหลัง: rgb(51,255,204); border:groove; ) a ( display: block; text-align: center; height: 100%; color: rgb(255,0,51) ; ) เชื่อมโยงไปยังเว็บไซต์ของเรา

ในตัวอย่างนี้ โดยใช้ line display: block เราตั้งค่าของลิงก์ องค์ประกอบบล็อก- และเพื่อให้ความสูงทั้งหมด บล็อก divกลายเป็นลิงก์ กำหนดความสูง: 100%

การซ่อนและการแสดงองค์ประกอบบล็อก

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

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

วิธีแก้ปัญหาที่มีเหตุผลมากกว่านี้คือการซ่อนบล็อกบางส่วนไว้ นี่เป็นตัวอย่างง่ายๆ ของการดำเนินการดังกล่าว:

#layer1( display:block; width: 500px; height: 100px; background: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="block"; ) อื่น ๆ ( layer1="none"; ) document.getElementById("layer1").style.display=layer1 )

นี่คือปุ่มวิเศษ การคลิกที่มันจะซ่อนหรือแสดงบล็อกการซ่อน

ในตัวอย่างนี้ ตำแหน่งของบล็อก div จะไม่เปลี่ยนแปลงแต่อย่างใด นี่มันใช้แล้ว. ฟังก์ชั่นที่ง่ายที่สุด JavaScript เปลี่ยนค่า คุณสมบัติ CSSแสดงผลหลังจากการคลิกปุ่ม (เหตุการณ์ onclick)

ไวยากรณ์การแสดงผล:
จอแสดงผล: บล็อก | อินไลน์ | อินไลน์บล็อก | อินไลน์ตาราง | รายการสินค้า | ไม่มี | รันอิน | ตาราง | คำบรรยายตาราง | ตารางเซลล์ | ตารางคอลัมน์กลุ่ม | ตารางคอลัมน์ | ตารางส่วนท้ายกลุ่ม | กลุ่มส่วนหัวของตาราง | ตารางแถว | ตารางแถวกลุ่ม

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

เราใช้ค่าสองค่าสำหรับคุณสมบัติการแสดงผลเพื่อซ่อนและแสดงเลเยอร์

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

DIV คืออะไร

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

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

เมื่อใดควรใช้ DIV

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

เปิดเว็บไซต์ใดก็ได้แล้วแบ่งออกเป็นบล็อกที่มีความหมาย ส่วนหัวอยู่ด้านบน ท้ายกระดาษอยู่ด้านล่าง ข้อความหลักอยู่ตรงกลาง ด้านข้างมักมีเสาเล็กๆ อยู่ด้วย เนื้อหาโฆษณาหรือแท็กคลาวด์

เอกสาร

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

การจัดตำแหน่ง DIVจัดกึ่งกลางโดยใช้ระยะขอบ

เมื่อแสดงผลองค์ประกอบเว็บ เบราว์เซอร์จะพิจารณาคุณสมบัติสามประการ: การแพดดิ้ง ระยะขอบ และเส้นขอบ Padding คือช่องว่างระหว่างเนื้อหาและเส้นขอบ Margin - ฟิลด์ที่แยกวัตถุหนึ่งออกจากอีกวัตถุหนึ่ง เส้นขอบคือเส้นตามแนวบล็อก สามารถมอบหมายให้กับพวกเขาทั้งหมดในคราวเดียวหรือเพียงฝ่ายเดียว:

div ( เส้นขอบ: 1px solid #333; เส้นขอบซ้าย: ไม่มี; )

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

บล็อกด้วย img (ระยะขอบซ้าย: 20%; )

องค์ประกอบสามารถจัดรูปแบบโดยใช้ค่าความกว้างและช่องว่างภายในที่เป็นลบ ตัวอย่างเช่น มีบล็อกที่มีขนาด 200px x 200px ก่อนอื่นเราจะมอบหมายให้เขา ตำแหน่งที่แน่นอนและย้ายไปตรงกลาง 50%

Div( ตำแหน่ง: สัมบูรณ์; ซ้าย: 50%; )

ตอนนี้ เพื่อให้แน่ใจว่า DIV ที่อยู่กึ่งกลางอยู่ในตำแหน่งที่สมบูรณ์แบบ เราจะให้ระยะขอบติดลบทางด้านซ้ายเท่ากับ 50% ของความกว้าง นั่นคือ -100 พิกเซล:

ขอบซ้าย: -100px;

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

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

วิธีจัดกึ่งกลางบล็อก DIV โดยใช้ระยะขอบอัตโนมัติ

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

ใช้วิธีร่วมกับ ฟิลด์อัตโนมัติเมื่อพัฒนาแอพพลิเคชั่นแบบปรับเปลี่ยนได้ สิ่งสำคัญคือการกำหนดค่าความกว้างให้กับคอนเทนเนอร์เป็น em หรือเปอร์เซ็นต์ โค้ดตัวอย่างด้านบนจะจัด DIV ไว้ตรงกลางบนอุปกรณ์ใดๆ รวมถึง โทรศัพท์มือถือโดยจะกินพื้นที่ 90% ของหน้าจอ

การจัดตำแหน่งผ่านคุณสมบัติการแสดงผล: inline-block

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

ข้อความใดก็ได้

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

Inner-div (จอแสดงผล: inline-block; )

คุณเปลี่ยนคุณสมบัติการแสดงผลจากบล็อกเป็นการบล็อกแบบอินไลน์

วิธีการแปลง/แปล

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

แปลงร่าง: แปล (50%, 50%);

ฟังก์ชั่นการแปลจะย้ายองค์ประกอบจากตำแหน่งปัจจุบันไปทางซ้าย/ขวาและขึ้น/ลง สองค่าถูกส่งไปในวงเล็บ:

• ระดับของการเคลื่อนไหวในแนวนอน
• ระดับของการเคลื่อนไหวในแนวตั้ง

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

แปลงร่าง: แปล Y(-20%);

ในคู่มือบางเล่ม คุณจะพบการแปลงด้วยคำนำหน้าผู้ขาย:

การแปลง Webkit: แปล (50%, 50%); -ms-transform: แปล (50%, 50%); แปลงร่าง: แปล (50%, 50%);

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

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

เอกสาร .nav-bar( display: block; width: 90%; height: 100vh; margin: 0 auto; background: linear-gradient(to left, red, #f06d06); ) .navigation( width: 50%; height: 50%; สี: #FFF; เส้นขอบ: 1px ประ #F5F2F2;

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

การทำงานกับเค้าโครง Flexbox

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

ในตัวอย่างก่อนหน้านี้ เราได้ทำงานกับคุณสมบัติการแสดงผลแล้ว แต่เราตั้งค่าให้บล็อกและค่าบล็อกแบบอินไลน์ ในการสร้างเลย์เอาต์แบบยืดหยุ่น เราจะใช้ display: flex ก่อนอื่นเราต้องมีคอนเทนเนอร์แบบยืดหยุ่น:

ในการแปลงเป็นคอนเทนเนอร์ดิ้นในตารางแบบเรียงซ้อน เราเขียน:

Flex-คอนเทนเนอร์ (จอแสดงผล: flex; )

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

ครั้งแรก สอง สาม สี่

หากคุณวางรายการไว้ในคอนเทนเนอร์แบบยืดหยุ่น รายการ li จะไม่ถือเป็นองค์ประกอบแบบยืดหยุ่น เค้าโครง Flexbox จะใช้ได้กับ ul เท่านั้น:

กฎสำหรับการวางองค์ประกอบดิ้น

ในการจัดการรายการดิ้น คุณต้องปรับเนื้อหาและจัดแนวรายการ ขึ้นอยู่กับ ค่าที่ระบุคุณสมบัติทั้งสองนี้จะวางวัตถุโดยอัตโนมัติตามความจำเป็น หากเราต้องการจัด DIV ที่ซ้อนกันทั้งหมดให้อยู่ตรงกลาง เราจะเขียน justify-content: center, align-items: center และไม่มีอะไรอื่นอีก เบราว์เซอร์จะทำงานที่เหลือเอง:

เอกสาร .flex-container( display: flex; justify-content: center; align-items: center; ) First Second Third Fourth

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