หากคุณตัดเข้าไปในเว็บไซต์ใดๆ ที่สร้างขึ้นโดยใช้ html คุณจะเห็นโครงสร้างแบบเลเยอร์บางอย่าง นอกจากนี้รูปลักษณ์ของมันจะคล้ายกับเค้กชั้น หากสิ่งนี้เกิดขึ้นกับคุณ เป็นไปได้มากว่าคุณไม่ได้ทานอาหารมาเป็นเวลานานแล้ว ดังนั้น ก่อนอื่นให้สนองความหิวของคุณ จากนั้นเราจะบอกวิธีจัดเลเยอร์ div ไว้ตรงกลางไซต์ของคุณ:
ข้อดีของการจัดวางโดยใช้แท็กโครงสร้างเว็บไซต์มีสองประเภทหลัก:
- ตาราง;
- ปิดกั้น.
เค้าโครงแบบตารางมีความโดดเด่นแม้ในช่วงเริ่มต้นของอินเทอร์เน็ต ข้อดีของมันคือความแม่นยำของตำแหน่งที่ระบุ แต่ถึงกระนั้นก็มีข้อบกพร่องที่ชัดเจน สิ่งสำคัญคือความยาวของโค้ดและความเร็วในการโหลดต่ำ
เมื่อใช้เค้าโครงตาราง หน้าเว็บจะไม่แสดงจนกว่าจะโหลดเสร็จสมบูรณ์ ขณะที่ใช้บล็อก div องค์ประกอบต่างๆ จะแสดงทันที
นอกจากความเร็วในการโหลดที่สูงแล้ว การสร้างบล็อกของเว็บไซต์ยังช่วยให้คุณลดจำนวนโค้ด html ได้หลายครั้ง รวมถึงผ่านการใช้คลาส 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) ; ) เชื่อมโยงไปยังเว็บไซต์ของเรา
ในตัวอย่างนี้ การใช้บรรทัด 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 )
นี่คือปุ่มวิเศษ การคลิกที่มันจะซ่อนหรือแสดงบล็อกการซ่อน
เมื่อจัดวางหน้า มักจำเป็นต้องจัดกึ่งกลางโดยใช้วิธี 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 แต่การเลือกวิธีที่ถูกต้องอาจเป็นเรื่องยุ่งยาก เราจะดูบางส่วนและสร้างเว็บไซต์ขนาดเล็กโดยใช้ความรู้ที่ได้รับ
การจัดตำแหน่งกึ่งกลางแนวตั้งไม่ใช่เรื่องง่ายเมื่อใช้ CSS มีหลายวิธีและไม่ใช่ทั้งหมดจะใช้ได้กับทุกเบราว์เซอร์ มาดู 5 วิธีที่แตกต่างกันและข้อดีข้อเสียของแต่ละวิธีกัน ตัวอย่าง.
วิธีการนี้จะถือว่าเราได้ตั้งค่าองค์ประกอบบางส่วนให้แสดงเป็นตาราง จากนั้นเราสามารถใช้คุณสมบัติการจัดแนวแนวตั้งได้ (ซึ่งทำงานแตกต่างกันในองค์ประกอบต่างๆ)
ข้อมูลที่เป็นประโยชน์บางอย่างที่ควรเป็นศูนย์กลาง
#wrapper ( จอแสดงผล: ตาราง; ) #cell ( จอแสดงผล: ตารางเซลล์; จัดแนวตั้ง: กลาง; )- ข้อดี
- เนื้อหาสามารถเปลี่ยนความสูงแบบไดนามิกได้ (ความสูงไม่ได้กำหนดไว้ใน CSS)
- ข้อเสีย
- ไม่ทำงานใน IE 7 หรือต่ำกว่า
วิธีที่ 2
วิธีการนี้ใช้การวางตำแหน่งที่แน่นอนของ div โดยตั้งค่าด้านบนเป็น 50% และระยะขอบด้านบนลบด้วยความสูงของเนื้อหาครึ่งหนึ่ง นี่หมายความว่าวัตถุจะต้องมีความสูงคงที่ซึ่งกำหนดไว้ในรูปแบบ CSS
เนื่องจากความสูงได้รับการแก้ไขแล้ว คุณสามารถตั้งค่า overflow:auto; สำหรับ div ที่มีเนื้อหา ดังนั้นหากเนื้อหาไม่พอดี แถบเลื่อนจะปรากฏขึ้น
#wrapper ( จอแสดงผล: ตาราง; ) #cell ( จอแสดงผล: ตารางเซลล์; จัดแนวตั้ง: กลาง; )- เนื้อหาที่นี่ #content ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ความสูง: 240px; ระยะขอบด้านบน: -120px; /* ลบครึ่งหนึ่งของความสูง */ )
- ไม่มีการซ้อนโดยไม่จำเป็น
- เมื่อมีพื้นที่ไม่เพียงพอ เนื้อหาจะหายไป (เช่น div อยู่ภายในเนื้อหา และผู้ใช้ทำให้หน้าต่างเล็กลง ซึ่งในกรณีนี้แถบเลื่อนจะไม่ปรากฏขึ้น
ในวิธีนี้ เราจะล้อม div เนื้อหาด้วย div อื่น ตั้งค่าความสูงเป็น 50% (ความสูง: 50%;) และระยะขอบด้านล่างเป็นครึ่งหนึ่งของความสูง (margin-bottom:-contentheight;) เนื้อหาจะล้างโฟลตและอยู่ตรงกลาง
นี่คือเนื้อหา #floater( float: left; height: 50%; Margin-bottom: -120px; ) #content( clear: Both; height: 240px; Position: Relative; )
#wrapper ( จอแสดงผล: ตาราง; ) #cell ( จอแสดงผล: ตารางเซลล์; จัดแนวตั้ง: กลาง; )- เนื้อหาที่นี่ #content ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ความสูง: 240px; ระยะขอบด้านบน: -120px; /* ลบครึ่งหนึ่งของความสูง */ )
- เมื่อมีพื้นที่ไม่เพียงพอ (เช่น เมื่อหน้าต่างลดลง) เนื้อหาจะไม่ถูกครอบตัด แถบเลื่อนจะปรากฏขึ้น
- ฉันคิดได้เพียงสิ่งเดียวเท่านั้น: มีการใช้องค์ประกอบว่างเพิ่มเติม
วิธีนี้ใช้ตำแหน่ง: สัมบูรณ์; สำหรับ div ที่มีขนาดคงที่ (กว้างและสูง) จากนั้นเราตั้งค่าพิกัดของมันไว้ด้านบน:0; ด้านล่าง:0; แต่เนื่องจากมีความสูงคงที่ จึงไม่ยืดออกและจัดชิดตรงกลาง ซึ่งคล้ายกับวิธีการที่รู้จักกันดีในการจัดกึ่งกลางองค์ประกอบบล็อกที่มีความกว้างคงที่ในแนวนอน (ระยะขอบ: 0 อัตโนมัติ;)
ข้อมูลสำคัญ.
#wrapper ( จอแสดงผล: ตาราง; ) #cell ( จอแสดงผล: ตารางเซลล์; จัดแนวตั้ง: กลาง; )- #content( ตำแหน่ง: สัมบูรณ์; บน: 0; ล่าง: 0; ซ้าย: 0; ขวา: 0; ระยะขอบ: อัตโนมัติ; ความสูง: 240px; ความกว้าง: 70%; )
- ง่ายมาก
- ไม่ทำงานใน Internet Explorer
วิธีที่ 5
เมื่อใช้วิธีการนี้ คุณสามารถจัดแนวข้อความหนึ่งบรรทัดให้อยู่ตรงกลางได้ เราเพียงตั้งค่าความสูงของข้อความ (line-height) เท่ากับความสูงขององค์ประกอบ (height) หลังจากนี้เส้นจะแสดงตรงกลาง
#wrapper ( จอแสดงผล: ตาราง; ) #cell ( จอแสดงผล: ตารางเซลล์; จัดแนวตั้ง: กลาง; )- เนื้อหาที่นี่ #content ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ความสูง: 240px; ระยะขอบด้านบน: -120px; /* ลบครึ่งหนึ่งของความสูง */ )
- ข้อความบางบรรทัด #content( height: 100px; line-height: 100px; )
- ไม่ตัดข้อความหากไม่พอดี
- ใช้ได้กับข้อความเท่านั้น (ใช้ไม่ได้กับองค์ประกอบบล็อก)
หากมีข้อความมากกว่าหนึ่งบรรทัดจะดูแย่มาก
วิธีการนี้มีประโยชน์มากสำหรับองค์ประกอบขนาดเล็ก เช่น การจัดกึ่งกลางข้อความในปุ่มหรือช่องข้อความ
ขั้นตอนที่ 1
- เป็นการดีเสมอที่จะเริ่มต้นด้วยมาร์กอัปเชิงความหมาย เพจของเราจะมีโครงสร้างดังนี้:
- #floater (เพื่อเนื้อหาตรงกลาง)
- #centred (องค์ประกอบกลาง)
- #ด้านข้าง
- #โลโก้
- #nav (รายการ
- #เนื้อหา
#bottom (เพื่อลิขสิทธิ์และทั้งหมดนั้น)
มาเขียนมาร์กอัป html ต่อไปนี้:
เกี่ยวกับปรับวิศวกรรมใหม่แบบองค์รวมเพื่อเพิ่มมูลค่าให้กับเอาท์ซอร์ส หลังจากการทำงานร่วมกันและการแบ่งปันแนวคิดโดยเน้นกระบวนการเป็นศูนย์กลาง
ลดความซับซ้อนของตลาดเฉพาะกลุ่มที่มีผลกระทบได้อย่างง่ายดายผ่านความจำเป็นที่เปิดใช้งาน ครอบงำนวัตกรรมระดับพรีเมียมแบบองค์รวมหลังจากสถานการณ์ที่น่าสนใจ ฟื้นคืนมาตรฐานระดับสูงด้านทุนมนุษย์อย่างราบรื่นด้วยผลิตภัณฑ์ที่ผลิตระดับแนวหน้า รวบรวมสคีมาที่สอดคล้องกับมาตรฐานอย่างชัดเจนก่อน vortals ที่แข็งแกร่ง ปรับแต่งความพร้อมของเว็บโดยใช้ประโยชน์จากข้อมูลแบบสำเร็จรูปที่ไม่ซ้ำใครหัวเรื่อง 2
ยอมรับความพร้อมของเว็บที่กำหนดเองอย่างมีประสิทธิภาพ แทนที่จะใช้กระบวนการที่ลูกค้ากำหนดทิศทางเอง มุ่งมั่นพัฒนาเทคโนโลยีเชิงรุกข้ามแพลตฟอร์มที่มีความต้องการข้ามแพลตฟอร์ม เพิ่มขีดความสามารถให้กับบริการเมตาของสหสาขาวิชาชีพอย่างสะดวกสบายโดยไม่ต้องใช้อินเทอร์เฟซทั่วทั้งองค์กร
ปรับปรุงพื้นที่ธีมเชิงกลยุทธ์ที่มีการแข่งขันอย่างสะดวกด้วยตลาดอิเล็กทรอนิกส์ที่มุ่งเน้น รวบรวมชุมชนระดับโลกแบบเรืองแสงกับตลาดที่มีมูลค่าเพิ่ม สร้างสรรค์บริการแบบองค์รวมอย่างเหมาะสมก่อนที่จะมี 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 เพื่อไม่ให้มีแถบเลื่อน
#องค์ประกอบตรงกลางกว้าง 80%. สิ่งนี้ทำให้ไซต์ของเราแคบลงบนหน้าจอขนาดเล็กและกว้างขึ้นบนหน้าจอขนาดใหญ่ ไซต์ส่วนใหญ่ดูลามกอนาจารบนจอภาพกว้างแบบใหม่ที่มุมซ้ายบน คุณสมบัติ min-width และ max-width ยังจำกัดหน้าของเราเพื่อไม่ให้ดูกว้างหรือแคบเกินไป Internet Explorer ไม่รองรับคุณสมบัติเหล่านี้ คุณต้องตั้งค่าให้มีความกว้างคงที่
เนื่องจากองค์ประกอบ #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 มีช่องว่างภายในเพิ่มเติมรอบเมนู
จำนวนการดู 237152 ครั้ง
บ่อยครั้งที่งานคือการจัดแนวบล็อกให้อยู่กึ่งกลางของหน้า / หน้าจอ และถึงแม้จะไม่มีสคริปต์ Java โดยไม่ต้องตั้งค่าขนาดที่เข้มงวดหรือการเยื้องเชิงลบ และเพื่อให้แถบเลื่อนทำงานได้สำหรับพาเรนต์หากบล็อกมีขนาดเกิน . มีตัวอย่างที่ซ้ำซากจำเจมากมายบนอินเทอร์เน็ตเกี่ยวกับวิธีจัดแนวบล็อกให้อยู่ตรงกลางหน้าจอ ตามกฎแล้วส่วนใหญ่ใช้หลักการเดียวกัน
ตัวเลือกที่ 1: การเยื้องเชิงลบ เราวางตำแหน่งบล็อกด้วยแอตทริบิวต์ด้านบนและซ้ายที่ 50% และเมื่อทราบความสูงและความกว้างของบล็อกล่วงหน้า ให้ตั้งค่าระยะขอบติดลบซึ่งเท่ากับครึ่งหนึ่งของขนาดของบล็อก ข้อเสียอย่างมากของตัวเลือกนี้คือคุณต้องนับการเยื้องที่เป็นลบ นอกจากนี้ บล็อกยังทำงานไม่ถูกต้องเมื่อล้อมรอบด้วยแถบเลื่อน - มันถูกตัดออกเพียงเพราะมีระยะขอบติดลบ
ด้านล่างนี้เป็นวิธีหลักในการแก้ปัญหาข้อดีและข้อเสีย เพื่อให้เข้าใจแก่นแท้ของตัวอย่าง ฉันแนะนำให้ลดความสูง/ความกว้างของหน้าต่างผลลัพธ์ในตัวอย่างตามลิงก์ที่ให้ไว้ผู้ปกครอง ( ความกว้าง: 100%; ความสูง: 100%; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; ล้น: อัตโนมัติ; ) .block ( ความกว้าง: 250px; ความสูง: 250px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ซ้าย : 50%; ระยะขอบ: -125px 0 0 -125px; img (ความกว้างสูงสุด: 100%; ความสูง: อัตโนมัติ; จอแสดงผล: บล็อก; ระยะขอบ: 0 อัตโนมัติ; เส้นขอบ: ไม่มี; )
ตัวเลือกที่ 2 การเยื้องอัตโนมัติ พบน้อยกว่า แต่คล้ายกับครั้งแรก สำหรับบล็อก ให้ตั้งค่าความกว้างและความสูง วางตำแหน่งแอตทริบิวต์ด้านบนขวาล่างซ้ายเป็น 0 และตั้งค่าระยะขอบอัตโนมัติ ข้อดีของตัวเลือกนี้คือใช้งานแถบเลื่อนบนพาเรนต์ หากแถบหลังตั้งค่าความกว้างและความสูงไว้ 100% ข้อเสียของวิธีนี้คือการตั้งค่ามิติที่เข้มงวดผู้ปกครอง ( ความกว้าง: 100%; ความสูง: 100%; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; ล้น: อัตโนมัติ; ) .block ( ความกว้าง: 250px; ความสูง: 250px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ขวา: 0; ด้านล่าง: 0; ซ้าย: 0; ระยะขอบ: อัตโนมัติ; img (ความกว้างสูงสุด: 100%; ความสูง: อัตโนมัติ; การแสดงผล: บล็อก; ระยะขอบ: 0 อัตโนมัติ; เส้นขอบ: ไม่มี; )
ตัวเลือก 3. ตาราง เราตั้งค่าสไตล์ตารางสำหรับพาเรนต์ และตั้งค่าการจัดแนวข้อความให้อยู่ตรงกลางสำหรับเซลล์พาเรนต์ และเราให้บล็อกเป็นโมเดลบล็อกเส้น ข้อเสียที่เราได้รับคือแถบเลื่อนไม่ทำงาน และโดยทั่วไปแล้ว ความสวยงามของ "การจำลอง" ตารางนั้นไม่ดีผู้ปกครอง ( ความกว้าง: 100%; ความสูง: 100%; จอแสดงผล: ตาราง; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; > .inner ( จอแสดงผล: เซลล์ตาราง; การจัดแนวข้อความ: กึ่งกลาง; การจัดแนวแนวตั้ง: ตรงกลาง; ) ) .block ( จอแสดงผล: อินไลน์บล็อก; img ( จอแสดงผล: บล็อก; เส้นขอบ: ไม่มี; ) )
หากต้องการเพิ่มการเลื่อนให้กับตัวอย่างนี้ คุณจะต้องเพิ่มองค์ประกอบอีกหนึ่งรายการให้กับการออกแบบ
ตัวเลือก 4 องค์ประกอบหลอก ตัวเลือกนี้ปราศจากปัญหาทั้งหมดที่ระบุไว้ในวิธีการก่อนหน้านี้ และยังช่วยแก้ปัญหาเดิมอีกด้วย แนวคิดคือการจัดสไตล์องค์ประกอบก่อนหน้าหลอกบนพาเรนต์ ได้แก่ ความสูง 100% การจัดตำแหน่งตรงกลาง และโมเดลบล็อกแบบอินไลน์ ในทำนองเดียวกัน บล็อกนั้นถูกตั้งค่าเป็นรูปแบบบล็อกเส้นซึ่งจัดชิดตรงกลาง เพื่อป้องกันไม่ให้บล็อก "ตกลง" ใต้องค์ประกอบหลอกเมื่อขนาดของบล็อกแรกใหญ่กว่าบล็อกแม่ เราจะระบุให้ผู้ปกครองทราบ: nowrap และ font-size: 0 หลังจากนั้นเราจะยกเลิกสไตล์เหล่านี้สำหรับ บล็อกดังต่อไปนี้ - white-space: ปกติ ในตัวอย่างนี้ จำเป็นต้องใช้ font-size: 0 เพื่อลบช่องว่างผลลัพธ์ระหว่างพาเรนต์และบล็อกเนื่องจากการจัดรูปแบบโค้ด พื้นที่สามารถลบออกได้ด้วยวิธีอื่น แต่ควรหลีกเลี่ยงเป็นการดีที่สุด
ตัวอย่าง: jsfiddle.net/serdidg/fk5nqh52/3ผู้ปกครอง ( ความกว้าง: 100%; ความสูง: 100%; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ซ้าย: 0; ล้น: อัตโนมัติ; ช่องว่างสีขาว: nowrap; การจัดแนวข้อความ: กึ่งกลาง; ขนาดตัวอักษร: 0; &:before ( ความสูง: 100%; จอแสดงผล: บล็อกแบบอินไลน์; แนวตั้ง: กลาง; เนื้อหา: "";
หรือ หากคุณต้องการให้พาเรนต์ใช้เฉพาะความสูงและความกว้างของหน้าต่าง ไม่ใช่ทั้งหน้า:
ผู้ปกครอง ( ตำแหน่ง: คงที่; บน: 0; ขวา: 0; ล่าง: 0; ซ้าย: 0; ล้น: อัตโนมัติ; ช่องว่างสีขาว: nowrap; การจัดตำแหน่งข้อความ: กึ่งกลาง; ขนาดตัวอักษร: 0; &: ก่อน ( ความสูง: 100%; แสดงผล: บล็อกแบบอินไลน์; แนวตั้ง: กลาง; เนื้อหา: "";
ตัวเลือกที่ 5 เฟล็กซ์บ็อกซ์ วิธีที่ง่ายที่สุดและหรูหราที่สุดวิธีหนึ่งคือการใช้ flexbox ไม่จำเป็นต้องเคลื่อนไหวร่างกายโดยไม่จำเป็น อธิบายสาระสำคัญของสิ่งที่เกิดขึ้นได้ค่อนข้างชัดเจน และมีความยืดหยุ่นสูง สิ่งเดียวที่ควรจำเมื่อเลือกวิธีนี้คือการรองรับ IE จากเวอร์ชัน 10 รวมอยู่ด้วย caniuse.com/#feat=flexboxผู้ปกครอง ( ความกว้าง: 100%; ความสูง: 100%; ตำแหน่ง: คงที่; ด้านบน: 0; ซ้าย: 0; จอแสดงผล: flex; align-items: center; align-content: center; justify-content: center; overflow: auto; ) .block ( พื้นหลัง: #60a839; img ( แสดง: บล็อก; เส้นขอบ: ไม่มี; ) )
ตัวเลือก 6. แปลงร่าง เหมาะสมหากเราถูกจำกัดด้วยโครงสร้าง และไม่มีวิธีใดที่จะจัดการองค์ประกอบหลักได้ แต่บล็อกจำเป็นต้องได้รับการจัดตำแหน่งด้วยวิธีใดวิธีหนึ่ง ฟังก์ชั่น CSS แปล () จะมาช่วยเหลือ ค่าตำแหน่งสัมบูรณ์ 50% จะวางตำแหน่งมุมซ้ายบนของบล็อกตรงกลาง จากนั้นค่าการแปลเชิงลบจะย้ายบล็อกโดยสัมพันธ์กับขนาดของบล็อกเอง โปรดทราบว่าเอฟเฟกต์เชิงลบอาจปรากฏในรูปแบบของขอบเบลอหรือรูปแบบตัวอักษร นอกจากนี้ วิธีการนี้อาจนำไปสู่ปัญหาในการคำนวณตำแหน่งของบล็อกโดยใช้จาวาสคริปต์ ในบางครั้ง เพื่อชดเชยการสูญเสียความกว้าง 50% เนื่องจากการใช้คุณสมบัติด้านซ้ายของ CSS กฎที่ระบุสำหรับบล็อกสามารถทำได้ ช่วยด้วย: ขอบขวา: -50%;ผู้ปกครอง ( ความกว้าง: 100%; ความสูง: 100%; ตำแหน่ง: คงที่; ด้านบน: 0; ซ้าย: 0; ล้น: อัตโนมัติ; ) .block ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ซ้าย: 50%; แปลงร่าง: แปล ( -50%, -50%); img (แสดง: บล็อก; ) )
ตัวเลือก 7. ปุ่ม ตัวเลือกผู้ใช้ โดยที่บล็อกถูกวางกรอบในแท็กปุ่ม ปุ่มมีคุณสมบัติในการจัดกึ่งกลางทุกสิ่งที่อยู่ภายใน นั่นคือองค์ประกอบของโมเดลอินไลน์และบล็อกไลน์ (บล็อกอินไลน์) ในทางปฏิบัติฉันไม่แนะนำให้ใช้มันผู้ปกครอง ( ความกว้าง: 100%; ความสูง: 100%; ตำแหน่ง: สัมบูรณ์; บน: 0; ซ้าย: 0; ล้น: อัตโนมัติ; พื้นหลัง: ไม่มี; เส้นขอบ: ไม่มี; โครงร่าง: ไม่มี; ) .block ( จอแสดงผล: อินไลน์บล็อก; img (แสดง: บล็อก;; เส้นขอบ: ไม่มี; ) )
โบนัส ด้วยการใช้แนวคิดของตัวเลือกที่ 4 คุณสามารถตั้งค่าระยะขอบภายนอกสำหรับบล็อกได้ และในขณะเดียวกัน บล็อกหลังจะแสดงอย่างเพียงพอล้อมรอบด้วยแถบเลื่อน
ตัวอย่าง: jsfiddle.net/serdidg/nfqg9rza/2คุณยังสามารถจัดแนวรูปภาพให้อยู่ตรงกลางได้ และหากรูปภาพมีขนาดใหญ่กว่ารูปภาพหลัก ให้ปรับขนาดเป็นขนาดของพาเรนต์
ตัวอย่าง: jsfiddle.net/serdidg/nfqg9rza/3
ตัวอย่างที่มีภาพขนาดใหญ่:การจัดองค์ประกอบในแนวนอนและแนวตั้งสามารถทำได้หลายวิธี การเลือกวิธีการขึ้นอยู่กับประเภทขององค์ประกอบ (บล็อกหรืออินไลน์) ประเภทของตำแหน่ง ขนาด ฯลฯ
1. การจัดตำแหน่งแนวนอนให้ตรงกลางบล็อก/หน้า 1.1. หากบล็อกมีความกว้าง: div ( width: 300px; margin: 0 auto; /*จัดกึ่งกลางองค์ประกอบในแนวนอนภายในบล็อกหลัก*/ )หากคุณต้องการจัดแนวองค์ประกอบอินไลน์ด้วยวิธีนี้ จะต้องตั้งค่าให้แสดง: block;
1.2. หากบล็อกซ้อนอยู่ในบล็อกอื่นและไม่มี/ความกว้างที่ระบุ: .wrapper (text-align: center;) 1.3. หากตั้งค่าความกว้างของบล็อกไว้และคุณจำเป็นต้องแก้ไขไว้ที่กึ่งกลางของบล็อกหลัก: .wrapper (ตำแหน่ง: สัมพันธ์; /*ตั้งค่าตำแหน่งสัมพันธ์สำหรับบล็อกหลัก เพื่อให้เราสามารถวางตำแหน่งบล็อกไว้ข้างในได้อย่างแน่นอน* /) .box ( width: 400px; ตำแหน่ง: สัมบูรณ์ ; ซ้าย: 50%; ขอบซ้าย: -200px; /*เลื่อนบล็อกไปทางซ้ายโดยระยะห่างเท่ากับครึ่งหนึ่งของความกว้าง*/ ) 1.4. หากบล็อกไม่ได้ระบุความกว้าง คุณสามารถจัดกึ่งกลางบล็อกได้โดยใช้บล็อกพาเรนต์: .wrapper (text-align: center; /*จัดกึ่งกลางเนื้อหาของบล็อก*/) .box ( display: inline-block; / *จัดเรียงบล็อกเป็นแถวตามแนวนอน*/ Margin-right: -0.25em; /*remove the right Margin between Blocks*/ ) 2. การจัดแนวแนวตั้ง 2.1. หากข้อความครอบคลุมหนึ่งบรรทัด เช่น สำหรับปุ่มและรายการเมนู: .button ( height: 50px; line-height: 50px; ) 2.2. หากต้องการจัดแนวบล็อกในแนวตั้งภายในบล็อกหลัก: .wrapper (ตำแหน่ง: ญาติ;) .box ( ความสูง: 100px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ระยะขอบ: -50px 0 0 0; ) 2.3. การจัดตำแหน่งแนวตั้งตามประเภทตาราง: .wrapper ( display: table; width: 100%; ) .box ( display: table-cell; height: 100px; text-align: center; Vertical-align: middle; ) 2.4. หากกล่องกำหนดความกว้างและความสูงและจำเป็นต้องอยู่ตรงกลางกล่องหลัก: .wrapper ( ตำแหน่ง: ญาติ; ) .box ( ความสูง: 100px; ความกว้าง: 100px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ขวา: 0; ด้านล่าง: 0; ซ้าย: 0; ระยะขอบ: อัตโนมัติ; ล้น: อัตโนมัติ; /*เพื่อให้เนื้อหาไม่กระจาย*/ ) ตำแหน่งที่แน่นอนที่กึ่งกลางของหน้า/บล็อกโดยใช้การแปลง CSS3:หากมีการระบุมิติสำหรับองค์ประกอบ
div ( width: 300px; /*กำหนดความกว้างของบล็อก*/ height:100px; /*กำหนดความสูงของบล็อก*/ แปลงร่าง: แปล(-50%, -50%); ตำแหน่ง: สัมบูรณ์; ด้านบน: 50 %; เหลือ: 50% ;
หากองค์ประกอบไม่มีมิติและไม่ว่างเปล่า
ข้อความบางส่วนที่นี่ h1 ( ระยะขอบ: 0; แปลง: แปล(-50%, -50%); ตำแหน่ง: สัมบูรณ์; บน: 50%; ซ้าย: 50%; )
- #centred (องค์ประกอบกลาง)
