หากคุณตัดเข้าไปในเว็บไซต์ใดๆ ที่สร้างขึ้นโดยใช้ 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 ในบทความก่อนหน้านี้บางบทความ ฉันได้กล่าวถึงหัวข้อนี้โดยอ้อม ดังนั้นคุณจึงมีความรู้ในเรื่องนี้บ้าง
อย่างไรก็ตาม ในเอกสารเผยแพร่นี้ ฉันจะบอกคุณเกี่ยวกับวิธีต่างๆ ในการจัดแนววัตถุ และยังอธิบายวิธีเยื้องและขีดสีแดงย่อหน้าอีกด้วย มาเริ่มเรียนรู้เนื้อหากันดีกว่า!
Html และลูกหลานและจัดแนววิธีนี้แทบไม่เคยใช้เลย เนื่องจากถูกแทนที่ด้วยเครื่องมือสไตล์ชีตแบบเรียงซ้อน อย่างไรก็ตาม การรู้ว่ามีแท็กดังกล่าวอยู่จะไม่ทำร้ายคุณ
สำหรับการตรวจสอบความถูกต้อง (คำนี้อธิบายไว้โดยละเอียดในบทความ "") ข้อกำหนด html เองก็ประณามการใช้งาน< center>เนื่องจากเพื่อความถูกต้องจึงจำเป็นต้องใช้ DOCTYPE> เฉพาะกาล
ประเภทนี้อนุญาตให้องค์ประกอบต้องห้ามผ่านได้
ศูนย์
เนื้อหานี้จะเป็นศูนย์กลาง
โปรดทราบว่าสำหรับรูปภาพ คุณลักษณะที่เรากำลังวิเคราะห์มีความหมายแตกต่างกันเล็กน้อย
ในตัวอย่างฉันใช้ align=" middle" ด้วยเหตุนี้ ภาพจึงถูกจัดเรียงเพื่อให้ประโยคตั้งอยู่ตรงกลางภาพอย่างชัดเจน
เครื่องมือจัดกึ่งกลางใน cssคุณสมบัติ CSS ที่ออกแบบมาเพื่อจัดแนวบล็อก ข้อความ และเนื้อหากราฟิกถูกใช้บ่อยกว่ามาก สาเหตุหลักมาจากความสะดวกและความยืดหยุ่นในการปรับใช้สไตล์
เรามาเริ่มด้วยคุณสมบัติการจัดกึ่งกลางข้อความแรก - text-align
มันทำงานในลักษณะเดียวกับการจัดตำแหน่งใน ในบรรดาคำสำคัญ คุณสามารถเลือกหนึ่งรายการจากรายการทั่วไปหรือสืบทอดคุณลักษณะของบรรพบุรุษ (สืบทอด)
ฉันต้องการทราบว่าใน css3 คุณสามารถตั้งค่าพารามิเตอร์เพิ่มเติมอีก 2 ตัว: เริ่มต้น - ขึ้นอยู่กับกฎการเขียนข้อความ (จากขวาไปซ้ายหรือกลับกัน) ตั้งค่าการจัดตำแหน่งไปทางซ้ายหรือขวา (คล้ายกับการทำงานของซ้ายหรือขวา ) และสิ้นสุด - ตรงกันข้ามกับการเริ่มต้น (เมื่อเขียนข้อความจากซ้ายไปขวาจะทำงานเหมือนขวาเมื่อเขียนจากขวาไปซ้าย - ซ้าย)
div การจัดแนวข้อความ ( เส้นขอบ: 5px สีแดงคู่; การขยาย: 0 22px 0 22px; ) #l ( การจัดแนวข้อความ: ขวา; ) #s ( การจัดแนวข้อความ: สิ้นสุด; )
ประโยคทางด้านขวา
ประโยคที่ใช้จุดสิ้นสุด
ฉันจะบอกคุณเกี่ยวกับเคล็ดลับเล็ก ๆ เมื่อเลือกชิดขอบ บรรทัดสุดท้ายอาจห้อยลงมาจากด้านล่างอย่างไม่สวยงาม ตัวอย่างเช่น เพื่อวางตำแหน่งไว้ตรงกลาง คุณสามารถใช้คุณสมบัติ text-align-last ได้
เมื่อต้องการจัดแนวเนื้อหาไซต์หรือเซลล์ตารางในแนวตั้ง ให้ใช้คุณสมบัติจัดแนวแนวตั้ง ด้านล่างนี้ฉันได้อธิบายคำหลักหลักขององค์ประกอบแล้ว
| คำสำคัญ | วัตถุประสงค์ |
| พื้นฐาน | ระบุการจัดแนวไปยังเส้นระดับบนสุด เรียกว่าเส้นฐาน หากวัตถุบรรพบุรุษไม่มีเส้นดังกล่าว การจัดตำแหน่งจะเกิดขึ้นตามขอบด้านล่าง |
| กลาง | ตรงกลางของวัตถุที่กลายพันธุ์นั้นถูกจัดแนวให้ตรงกับเส้นฐาน ซึ่งมีการเพิ่มความสูงของพื้นขององค์ประกอบหลักเข้าไปด้วย |
| ด้านล่าง | ด้านล่างของเนื้อหาที่เลือกจะปรับไปที่ด้านล่างของวัตถุที่อยู่ด้านล่าง |
| สูงสุด | คล้ายกับด้านล่าง แต่มีส่วนบนของวัตถุ |
| สุด ๆ | ทำให้อักขระเป็นตัวยก |
| ย่อย | ทำให้องค์ประกอบตัวห้อย |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | แนวตั้งจัดดอกไม้ |
div จัดแนวตั้ง ( ขนาดแบบอักษร: 4em; text-align:center; ตกแต่งข้อความ: ขีดเส้นใต้; ) #A(จัดแนวตั้ง: ด้านบน;) #B(จัดแนวตั้ง: ตรงกลาง;) #C(จัดแนวตั้ง : super;) #D(จัดแนวแนวตั้ง: sub;) FLOWER
การเยื้องและในที่สุดเราก็มาถึงการเยื้องย่อหน้า ภาษา CSS ใช้คุณสมบัติพิเศษที่เรียกว่า text-indent
ด้วยความช่วยเหลือคุณสามารถสร้างทั้งเส้นสีแดงและส่วนที่ยื่นออกมา (คุณต้องระบุค่าลบ)
เยื้องข้อความ #a ( เยื้องข้อความ: 53px; ) #b ( เยื้องข้อความ: -43px; ) div ( พื้นหลัง: #FFDAB9; ความกว้าง:35%; ขนาดตัวอักษร:29px; ระยะขอบซ้าย: 30%; การขยาย -ซ้าย:50px;
หากต้องการสร้างเส้นสีแดง คุณจำเป็นต้องทราบพารามิเตอร์เพียงตัวเดียวเท่านั้น
นี่คือคุณสมบัติการเยื้องข้อความแบบธรรมดา
มีหลายวิธีโดยพื้นฐานที่แตกต่างกันในการจัดกึ่งกลางวัตถุในแนวตั้งโดยใช้ 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; #content (ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; บน: 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 ครั้ง
วลาด เมอร์เซวิช
เนื่องจากเนื้อหาของเซลล์ตารางสามารถจัดตำแหน่งในแนวนอนและแนวตั้งได้พร้อมกันจึงขยายความเป็นไปได้ในการควบคุมตำแหน่งขององค์ประกอบที่สัมพันธ์กัน ตารางช่วยให้คุณสามารถตั้งค่าการจัดแนวรูปภาพ ข้อความ ฟิลด์แบบฟอร์ม และองค์ประกอบอื่นๆ ที่สัมพันธ์กันและหน้าเว็บโดยรวม โดยทั่วไป การจัดตำแหน่งมีความจำเป็นเป็นหลักเพื่อสร้างการเชื่อมต่อทางภาพระหว่างองค์ประกอบต่างๆ รวมถึงการจัดกลุ่มองค์ประกอบเหล่านั้นเข้าด้วยกัน
การจัดกึ่งกลางแนวตั้งวิธีหนึ่งที่จะแสดงให้ผู้เยี่ยมชมเห็นถึงจุดสนใจและชื่อของไซต์คือการใช้หน้าสแปลช นี่คือหน้าแรกซึ่งตามกฎแล้วจะมีหน้าจอแฟลชหรือรูปภาพที่แสดงแนวคิดหลักของไซต์ รูปภาพนี้ยังเป็นลิงก์ไปยังส่วนอื่นๆ ของไซต์อีกด้วย คุณต้องวางภาพนี้ไว้ตรงกลางหน้าต่างเบราว์เซอร์ ไม่ว่าจอภาพจะมีความละเอียดเท่าใด เพื่อจุดประสงค์นี้ คุณสามารถใช้ตารางที่มีความกว้างและความสูง 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 /* ระยะขอบรอบเนื้อหาเซลล์ */ )
หากต้องการย่อโค้ดให้สั้นลง ตัวอย่างนี้ใช้การจัดกลุ่มตัวเลือกเนื่องจากคุณสมบัติการจัดแนวตั้งและการเติมจะนำไปใช้กับสองเซลล์ในเวลาเดียวกัน
การจัดตำแหน่งด้านล่างเสร็จสิ้นในลักษณะเดียวกัน แต่แทนที่จะใช้ค่าบนสุด จะใช้ด้านล่างแทนการจัดตำแหน่งกึ่งกลาง
ในกรณีนี้ สูตรจะอยู่ที่กึ่งกลางหน้าต่างเบราว์เซอร์อย่างเคร่งครัด และหมายเลขจะอยู่ที่ขอบด้านขวา ในการจัดเรียงองค์ประกอบในลักษณะนี้ คุณจะต้องมีตารางที่มีสามเซลล์ เซลล์ด้านนอกควรมีขนาดเท่ากัน ในเซลล์ตรงกลางการจัดตำแหน่งจะอยู่ตรงกลาง และในเซลล์ด้านขวา - ตามขอบด้านขวา (ตัวอย่างที่ 4) ต้องใช้จำนวนเซลล์นี้เพื่อให้แน่ใจว่าสูตรอยู่ตรงกลาง
ตัวอย่างที่ 4: การจัดตำแหน่งสูตร
การจัดตำแหน่ง
(18.6) ในตัวอย่างนี้ เซลล์แรกของตารางจะเว้นว่างไว้ โดยจะทำหน้าที่สร้างการเยื้องเท่านั้น ซึ่งสามารถตั้งค่าโดยใช้สไตล์ได้เช่นกัน
การจัดแนวองค์ประกอบของแบบฟอร์มการใช้ตารางทำให้สะดวกในการกำหนดตำแหน่งของเขตข้อมูลแบบฟอร์ม โดยเฉพาะอย่างยิ่งเมื่อมีการสลับกับข้อความ หนึ่งในตัวเลือกการออกแบบสำหรับแบบฟอร์มซึ่งมีไว้สำหรับการป้อนความคิดเห็นจะแสดงในรูปที่ 1 3.
เพื่อให้แน่ใจว่าข้อความถัดจากช่องแบบฟอร์มจัดชิดขวาและองค์ประกอบของแบบฟอร์มจัดชิดซ้าย คุณจะต้องมีตารางที่มีเส้นขอบที่มองไม่เห็นและสองคอลัมน์ คอลัมน์ด้านซ้ายจะมีข้อความ และคอลัมน์ด้านขวาจะมีช่องข้อความ (ตัวอย่างที่ 5)
ตัวอย่างที่ 5: การจัดแนวเขตข้อมูลแบบฟอร์ม
การจัดตำแหน่ง
ชื่อ อีเมล ความคิดเห็น ในตัวอย่างนี้ สำหรับเซลล์ที่ต้องการการจัดตำแหน่งที่ถูกต้อง จะมีการเพิ่มแอตทริบิวต์ align="right"
- เพื่อให้แน่ใจว่าป้ายกำกับความคิดเห็นอยู่ในตำแหน่งด้านบนของข้อความหลายบรรทัด เซลล์ที่เกี่ยวข้องจะถูกตั้งค่าให้จัดชิดด้านบนโดยใช้แอตทริบิวต์ valign
- ซีเอสเอส
HTML
ฉันคิดว่าหลายๆ คนที่ต้องจัดการกับเลย์เอาต์ต้องเผชิญกับความจำเป็นในการจัดองค์ประกอบในแนวตั้ง และทราบถึงความยากลำบากที่เกิดขึ้นเมื่อจัดองค์ประกอบให้อยู่ตรงกลาง
ใช่ มีคุณสมบัติพิเศษในการจัดแนวตั้งหลายค่าใน CSS สำหรับการจัดตำแหน่งตามแนวตั้ง อย่างไรก็ตาม ในทางปฏิบัติมันไม่ได้ผลตามที่คาดไว้เลย ลองคิดดูสิ- ลองเปรียบเทียบแนวทางต่อไปนี้ จัดตำแหน่งโดยใช้:
- ตาราง
- การเยื้อง,
- เส้นสูง
- การยืดกล้ามเนื้อ,
- อัตรากำไรติดลบ
- แปลงร่าง
- องค์ประกอบหลอก
เพื่ออธิบาย ให้พิจารณาตัวอย่างต่อไปนี้
มีองค์ประกอบ div สองรายการ โดยองค์ประกอบหนึ่งซ้อนอยู่ภายในอีกองค์ประกอบหนึ่ง มาแบ่งคลาสที่เกี่ยวข้องกัน - ภายนอกและภายในความท้าทายคือการจัดองค์ประกอบภายในให้ตรงกับศูนย์กลางขององค์ประกอบภายนอก
โปรดจำไว้ว่าการจัดตำแหน่งจะใช้กับองค์ประกอบที่มีโหมดการแสดงผลแบบอินไลน์หรือแบบอินไลน์เท่านั้น
มากำหนดขนาดของบล็อกรวมถึงสีพื้นหลังเพื่อให้เรามองเห็นเส้นขอบได้
ด้านนอก ( ความกว้าง: 200px; ความสูง: 200px; text-align: center; แนวตั้ง: กลาง; สีพื้นหลัง: #ffc; ) .inner ( จอแสดงผล: inline-block; ความกว้าง: 100px; ความสูง: 100px; สีพื้นหลัง : #fcc )
หลังจากใช้สไตล์แล้ว เราจะเห็นว่าบล็อกด้านในจัดเรียงตามแนวนอน แต่ไม่ใช่แนวตั้ง:
http://jsfiddle.net/c1bgfffq/ทำไมสิ่งนี้ถึงเกิดขึ้น?ประเด็นก็คือคุณสมบัติการจัดแนวแนวตั้งส่งผลต่อการจัดตำแหน่งขององค์ประกอบ ไม่ใช่เนื้อหา (ยกเว้นเมื่อนำไปใช้กับเซลล์ตาราง) ดังนั้นการนำคุณสมบัตินี้ไปใช้กับองค์ประกอบภายนอกจึงไม่ก่อให้เกิดสิ่งใดเลย นอกจากนี้ การใช้คุณสมบัตินี้กับองค์ประกอบภายในจะไม่ทำอะไรเลย เนื่องจากบล็อกอินไลน์ถูกจัดเรียงในแนวตั้งโดยสัมพันธ์กับบล็อกที่อยู่ติดกัน และในกรณีของเรา เรามีบล็อกอินไลน์หนึ่งบล็อก
มีเทคนิคหลายประการในการแก้ปัญหานี้ ด้านล่างนี้เราจะมาดูแต่ละรายการอย่างละเอียดยิ่งขึ้น
การจัดตำแหน่งโดยใช้ตาราง วิธีแก้ปัญหาแรกที่นึกถึงคือการแทนที่บล็อกด้านนอกด้วยตารางของเซลล์เดียว ในกรณีนี้ การจัดตำแหน่งจะถูกนำไปใช้กับเนื้อหาของเซลล์นั่นคือกับบล็อกด้านใน
http://jsfiddle.net/c1bgfffq/1/ข้อเสียที่ชัดเจนของโซลูชันนี้คือ จากมุมมองเชิงความหมาย การใช้ตารางสำหรับการจัดตำแหน่งไม่ถูกต้อง ข้อเสียประการที่สองคือการสร้างตารางจำเป็นต้องเพิ่มองค์ประกอบอื่นรอบบล็อกด้านนอก
ลบแรกสามารถลบออกได้บางส่วนโดยการแทนที่ตารางและแท็ก td ด้วย div และตั้งค่าโหมดการแสดงผลตารางใน CSS
การจัดตำแหน่งโดยใช้การเยื้อง หากทราบความสูงของบล็อกด้านในและด้านนอก การจัดตำแหน่งสามารถตั้งค่าได้โดยใช้การเยื้องแนวตั้งของบล็อกด้านในโดยใช้สูตร: (H ด้านนอก – H ด้านใน) / 2
.outer-wrapper ( จอแสดงผล: ตาราง; ) .outer ( จอแสดงผล: ตารางเซลล์; )
อย่างไรก็ตาม บล็อกด้านนอกจะยังคงเป็นตารางที่มีผลตามมาทั้งหมดด้านนอก ( ความสูง: 200px; ) .inner ( ความสูง: 100px; ระยะขอบ: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/ข้อเสียของการแก้ปัญหาคือใช้ได้เฉพาะในกรณีที่ทราบความสูงของบล็อกทั้งสองเท่านั้น
การจัดแนวด้วย line-height หากคุณทราบว่าบล็อกด้านในควรใช้ข้อความไม่เกินหนึ่งบรรทัด คุณสามารถใช้คุณสมบัติ line-height และตั้งค่าให้เท่ากับความสูงของบล็อกด้านนอกได้ เนื่องจากเนื้อหาของบล็อกด้านในไม่ควรพันเข้ากับบรรทัดที่สอง จึงแนะนำให้เพิ่มช่องว่าง: nowrap และ overflow: กฎที่ซ่อนอยู่ด้านนอก ( ความสูง: 200px; ความสูงบรรทัด: 200px; ) .inner ( ช่องว่างสีขาว: nowrap; ล้น: ซ่อนอยู่; )
http://jsfiddle.net/c1bgfffq/12/เทคนิคนี้ยังสามารถใช้เพื่อจัดแนวข้อความหลายบรรทัดได้ หากคุณกำหนดค่าความสูงของบรรทัดใหม่สำหรับบล็อกด้านใน และยังเพิ่มการแสดงผล: บล็อกอินไลน์ และการจัดแนวตั้ง: กฎตรงกลาง
ด้านนอก ( ความสูง: 200px; line-height: 200px; ) .inner ( ความสูงบรรทัด: ปกติ; จอแสดงผล: inline-block; แนวตั้ง: กลาง; )
http://jsfiddle.net/c1bgfffq/15/ข้อเสียของวิธีนี้คือต้องทราบความสูงของบล็อกภายนอก
การจัดตำแหน่งโดยใช้ "การยืด" วิธีการนี้สามารถใช้ได้เมื่อไม่ทราบความสูงของบล็อกภายนอก แต่ทราบความสูงของบล็อกภายในในการทำเช่นนี้คุณต้องมี:
- กำหนดตำแหน่งสัมพัทธ์ให้กับบล็อกภายนอก และกำหนดตำแหน่งสัมบูรณ์ให้กับบล็อกภายใน
- เพิ่มกฎด้านบน: 0 และด้านล่าง: 0 ให้กับบล็อกด้านในซึ่งเป็นผลมาจากการที่มันจะขยายไปจนถึงความสูงทั้งหมดของบล็อกด้านนอก
- ตั้งค่าช่องว่างภายในแนวตั้งของบล็อกด้านในเป็นอัตโนมัติ
.outer ( ตำแหน่ง: สัมพันธ์; ) .inner ( ความสูง: 100px; ตำแหน่ง: สัมบูรณ์; บน: 0; ล่าง: 0; ระยะขอบ: อัตโนมัติ 0; )
http://jsfiddle.net/c1bgfffq/4/แนวคิดเบื้องหลังเทคนิคนี้คือ การตั้งค่าความสูงสำหรับบล็อกที่ยืดออกและอยู่ในตำแหน่งที่แน่นอนจะทำให้เบราว์เซอร์คำนวณช่องว่างในแนวตั้งในอัตราส่วนที่เท่ากันหากตั้งค่าเป็น auto
การจัดตำแหน่งโดยใช้ระยะขอบติดลบ-บน วิธีนี้เป็นที่รู้จักอย่างกว้างขวางและมีการใช้บ่อยมาก เช่นเดียวกับก่อนหน้านี้ จะใช้เมื่อไม่ทราบความสูงของบล็อกด้านนอก แต่ทราบความสูงของบล็อกด้านในคุณต้องตั้งค่าบล็อกภายนอกเป็นตำแหน่งสัมพัทธ์ และบล็อกภายในเป็นตำแหน่งสัมบูรณ์ จากนั้น คุณจะต้องย้ายบล็อกด้านในลงครึ่งหนึ่งของความสูงด้านบนของบล็อกด้านนอก: 50% และยกขึ้นอีกครึ่งหนึ่งของความสูงขอบด้านบน: -H ภายใน / 2
ด้านนอก ( ตำแหน่ง: ญาติ; ) .inner ( ความสูง: 100px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ระยะขอบด้านบน: -50px; )
http://jsfiddle.net/c1bgfffq/13/ข้อเสียของวิธีนี้คือต้องทราบความสูงของคอยล์เย็น
การจัดตำแหน่งโดยใช้การแปลง วิธีนี้คล้ายกับวิธีก่อนหน้า แต่สามารถใช้ได้เมื่อไม่ทราบความสูงของบล็อกด้านใน ในกรณีนี้ แทนที่จะตั้งค่าการเติมพิกเซลเชิงลบ คุณสามารถใช้คุณสมบัติการแปลงและย้ายบล็อกด้านในขึ้นโดยใช้ฟังก์ชัน TranslateY และค่า -50%ด้านนอก ( ตำแหน่ง: ญาติ; ) .inner ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; แปลงร่าง: แปล Y(-50%); )
http://jsfiddle.net/c1bgfffq/9/เหตุใดจึงไม่สามารถตั้งค่าเป็นเปอร์เซ็นต์ในวิธีก่อนหน้าได้ เนื่องจากค่าเปอร์เซ็นต์มาร์จิ้นถูกคำนวณโดยสัมพันธ์กับองค์ประกอบหลัก ค่า 50% จะเป็นครึ่งหนึ่งของความสูงของกล่องด้านนอก และเราจะต้องยกกล่องด้านในให้มีความสูงครึ่งหนึ่งของตัวเอง คุณสมบัติการแปลงสภาพนั้นสมบูรณ์แบบสำหรับสิ่งนี้
ข้อเสียของวิธีนี้คือไม่สามารถใช้งานได้หากคอยล์เย็นอยู่ในตำแหน่งที่แน่นอน
การจัดตำแหน่งด้วย Flexbox วิธีการจัดตำแหน่งแนวตั้งที่ทันสมัยที่สุดคือการใช้เค้าโครงกล่องแบบยืดหยุ่น (รู้จักกันทั่วไปในชื่อ Flexbox) โมดูลนี้ช่วยให้คุณควบคุมการวางตำแหน่งขององค์ประกอบบนเพจได้อย่างยืดหยุ่น โดยจัดเรียงได้เกือบทุกที่ การจัดตำแหน่งกึ่งกลางสำหรับ Flexbox นั้นเป็นงานที่ง่ายมากต้องตั้งค่าบล็อกด้านนอกเพื่อแสดง: flex และบล็อกด้านในเป็น Margin: auto และนั่นคือทั้งหมด! สวยใช่มั้ยล่ะ?
ด้านนอก ( จอแสดงผล: ดิ้น; ความกว้าง: 200px; ความสูง: 200px; ) .inner ( ความกว้าง: 100px; ระยะขอบ: อัตโนมัติ; )
http://jsfiddle.net/c1bgfffq/14/ข้อเสียของวิธีนี้คือ Flexbox รองรับเฉพาะเบราว์เซอร์สมัยใหม่เท่านั้น
ฉันควรเลือกวิธีใด? คุณต้องเริ่มจากคำชี้แจงปัญหา:- หากต้องการจัดแนวข้อความในแนวตั้ง ควรใช้การเยื้องแนวตั้งหรือคุณสมบัติ line-height
- สำหรับองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนซึ่งมีความสูงที่ทราบ (เช่น ไอคอน) วิธีการที่มีคุณสมบัติระยะขอบด้านบนติดลบจะเหมาะอย่างยิ่ง
- สำหรับกรณีที่ซับซ้อนมากขึ้น เมื่อไม่ทราบความสูงของบล็อก คุณจะต้องใช้องค์ประกอบหลอกหรือคุณสมบัติการแปลง
- ถ้าคุณโชคดีมากที่ไม่จำเป็นต้องรองรับเบราว์เซอร์ IE เวอร์ชันเก่ากว่า แน่นอนว่าควรใช้ Flexbox จะดีกว่า
เราขอแนะนำ
ความลึกบิตของ Windows คืออะไร
หากต้องการทราบรุ่น เวอร์ชัน บิวด์ และบิตเนสของ Windows 10 มีวิธีง่ายๆ หลายวิธี ในการเปิดตัว เราหมายถึงรุ่นต่างๆ ของ Windows 10 และนี่...
- #centred (องค์ประกอบกลาง)
