จัดแนวกึ่งกลาง: เค้าโครง CSS

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

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

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

• text-align: center;

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

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

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

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

• margin: 0 auto;

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

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

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

• .left {float: left;}
• ขวา {float: right}

ถ้ามีบล็อกที่สามซึ่งควรอยู่ใต้สองช่วงตึกแรก (เช่นส่วนท้าย) จากนั้นจะต้องตั้งค่าพร็อพเพอร์ตี้ที่ชัดเจน:

• .left {float: left;}
• ขวา {float: right}
• ท้าย {ชัดเจน: ทั้งสอง}

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

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

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

• การจัดแนวแนวนอน - .child {vertical-align: top};
• การจัดแนวกึ่งกลาง - .child {vertical-align: middle};
• การจัดตำแหน่งด้านล่าง - .child {vertical-align: bottom};

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

ปัญหาที่เป็นไปได้กับบล็อคที่จัดชิดกัน

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

• วินาทีที่ {float: left}
• .third {float: right}
• .clearfix {height: 0; ชัดเจน: ทั้งสอง;}

มักใช้เทียมชั้น:หลังจากที่ยังช่วยให้คุณสามารถกลับบล็อกเข้าที่โดยการสร้าง pseudo-razorka (ในตัวอย่างใน div ด้วยคลาสคอนเทนเนอร์อยู่ภายใน. first และมี. lew และ rightright)

• .left {float: left}
• ขวา {float: right}
• .container: after {content: ""; แสดง: ตาราง; ชัดเจน: ทั้งสอง;}

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

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

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