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

วันนี้คุณผู้อ่านที่รัก เราจะมาจัดการกับปัญหาการจัดตำแหน่งแนวตั้งในบล็อกกัน กอง.

เป็นไปได้มากว่าคุณรู้อยู่แล้วเกี่ยวกับการมีอยู่ของคุณสมบัติ CSS ที่ยอดเยี่ยมในแนวตั้ง

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

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

ตอนนี้เรามาเริ่มแก้ไขปัญหากันดีกว่า

ดังนั้นเราจึงมีบล็อก ความสูงของมันสามารถเปลี่ยนแปลงได้:

บล็อกเนื้อหา

ดังนั้นเราจึงมีบล็อก ความสูงของมันสามารถเปลี่ยนแปลงได้:

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

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

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

เกี่ยวกับการจัดตำแหน่งภายในเซลล์ตาราง ฉันคิดว่าทุกอย่างชัดเจน แต่ฉันจะอธิบายอีกกรณีหนึ่งด้วยองค์ประกอบแบบอินไลน์

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

เป็นส่วนๆ:

ข้อความยินดีต้อนรับคุณ!

แท็กอินไลน์คือคอนเทนเนอร์ที่มีลักษณะไม่ทำให้เนื้อหาต้องขึ้นบรรทัดใหม่

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

จะยังคงอยู่ในบรรทัดเดียวกัน คอนเทนเนอร์

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

ใช้คุณสมบัติ CSS ต่อไปนี้:

#perviy( แนวตั้ง-align:sub; ) #vtoroy( แนวตั้ง-align:3px; ) #tretiy( แนวตั้ง-align:-3px; )

บรรทัดข้อความผลลัพธ์จะมีลักษณะดังนี้:

เราฟุ้งซ่านเล็กน้อย ตอนนี้เรากลับมาที่งานหลักของเราแล้ว

การจัดตำแหน่งแนวตั้งในคอนเทนเนอร์ div

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

เราจะใช้สิ่งนี้ได้อย่างไร? เราไม่มีโต๊ะ เราทำงานกับคอนเทนเนอร์ div

ฮา มันกลายเป็นเรื่องง่ายมาก

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

สมมติว่าเรามีคลาส div การจัดตำแหน่งข้อความ:

ดังนั้นเราจึงมีบล็อก ความสูงของมันสามารถเปลี่ยนแปลงได้:

สำหรับบล็อกนี้ เราระบุคุณสมบัติ CSS ดังต่อไปนี้:

Textalign( แสดง: ตารางเซลล์; )

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

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

มีหลายวิธีในการบรรลุการจัดตำแหน่งในคอนเทนเนอร์ div สำหรับเบราว์เซอร์ทั้งหมด:

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

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

ความคิดเห็นแบบมีเงื่อนไข

ประเภทการก่อสร้าง:

... คำแนะนำที่ใช้เฉพาะในกรณีที่เงื่อนไขในวงเล็บเหลี่ยมเป็นจริง...

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

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

ดังนั้น เมื่อใช้ความคิดเห็นแบบมีเงื่อนไข เราสามารถซ่อนโค้ดบางส่วนจากเบราว์เซอร์ทั้งหมดยกเว้น IE

การแก้ปัญหา

เนื่องจากผักชีฝรั่งทั้งหมดนี้ เราจะต้องจัดเตรียมโค้ด HTML ของเราพร้อมกับคอนเทนเนอร์เพิ่มเติมอีกสองคอนเทนเนอร์ นี่คือลักษณะของบล็อกข้อความของเรา:

นี่คือข้อความยืนยันบางประเภท
ประกอบด้วยสองบรรทัด

สำหรับคอนเทนเนอร์ div คลาส จัดข้อความคุณสมบัติ CSS ได้รับการตั้งค่าให้จัดเนื้อหาในแนวตั้งสำหรับเบราว์เซอร์ปกติทั้งหมด (ยกเว้น IE แน่นอน):

จอแสดงผล: ตารางเซลล์; แนวตั้ง-จัด: กลาง;

และคุณสมบัติอีกสองประการที่กำหนดความกว้างและความสูงของบล็อก:

ความกว้าง:500px; ความสูง: 500px;

ซึ่งเพียงพอแล้วที่จะจัดแนวเนื้อหาของคอนเทนเนอร์ในแนวตั้ง ในทุกเบราว์เซอร์ ยกเว้น IE

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

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

div จัดตำแหน่งข้อความ (ตำแหน่ง: สัมบูรณ์; บน: 50%; )

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

ตามสไตล์ที่ระบุไว้สำหรับบล็อก จัดข้อความมีการแก้ไข:

Textalign( จอแสดงผล: ตารางเซลล์; แนวตั้ง: กลาง; ความกว้าง:500px; ความสูง: 500px; ตำแหน่ง: ญาติ; )

ตอนนี้จุดซ้ายบนของบล็อกข้อความถูกย้ายลง 50%

เพื่ออธิบายสิ่งที่เกิดขึ้น ฉันจึงวาดภาพประกอบ:

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

ตอนนี้แท็กจะเข้ามาเล่น ช่วงและตำแหน่งที่สัมพันธ์กัน:

ช่วงการจัดตำแหน่งข้อความ ( ตำแหน่ง: สัมพันธ์; ด้านบน: -50%; )

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

มาโกงกันหน่อย

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

.textalign div ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ) .textalign span ( ตำแหน่ง: สัมพันธ์; ด้านบน: -50%; )

มีปัญหาเล็กน้อย

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

จัดข้อความ ทำความรู้จักคุณสมบัติโดยละเอียดล้น

เป็นไปได้ใน. จัดข้อความคำแนะนำ CSS สุดท้ายสำหรับบล็อก

มีรูปแบบ:

Textalign( จอแสดงผล: table-cell; แนวตั้ง: กลาง; ความกว้าง: 500px; ความสูง: 500px; ตำแหน่ง: ญาติ; ล้น: ซ่อนไว้; เส้นขอบ: 1px สีดำทึบ; ) จัดข้อความฉันขอโทษ ฉันลืมพูดถึงประเด็นสำคัญอย่างหนึ่ง หากคุณพยายามกำหนดความสูงของบล็อกคลาส

คิดเป็นเปอร์เซ็นต์ จะไม่มีอะไรเกิดขึ้นสำหรับคุณ

อยู่ตรงกลางในบล็อกความสูงผันแปร จัดข้อความบ่อยครั้งจำเป็นต้องกำหนดความสูงของบล็อกคลาส

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

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

จะสืบทอดความสูงของบล็อกหลักอย่างมีความสุข

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

- ตอนนี้เราสามารถเปลี่ยนค่าความสูงจาก 500 พิกเซลเป็น 100% ได้อย่างปลอดภัย จัดข้อความดังนั้นคุณสมบัติ CSS สำหรับบล็อกคลาส

จะมีลักษณะเช่นนี้:

Textalign( แสดง: ตาราง; ความกว้าง:500px; ความสูง: 100%; ตำแหน่ง: สัมพันธ์; ล้น: ซ่อนไว้; เส้นขอบ: 1px สีดำทึบ; ) จัดข้อความ(นี่คือบล็อกสีเหลืองเดียวกันในภาพ) คุณต้องตั้งค่าคุณสมบัติ CSS กลายเป็นเซลล์ตารางทุกประการด้วยคุณสมบัติจากนั้นจะสืบทอดความสูง 100% จากบล็อกหลัก จัดข้อความ(บล็อกสีม่วง). และไม่มีอะไรที่จะหยุดเราไม่ให้จัดแนวเนื้อหาของคอนเทนเนอร์ div ที่ซ้อนกันอยู่ตรงกลางด้วยคุณสมบัติ และลบคำสั่งการจัดตำแหน่งออก.

เราได้รับรายการคุณสมบัติ CSS เพิ่มเติมอีกรายการสำหรับบล็อก div ที่ซ้อนอยู่ในคอนเทนเนอร์ จัดข้อความ.

การจัดตำแหน่งข้อความ div (จอแสดงผล: ตารางเซลล์; จัดแนวตั้ง: กลาง; )

นั่นคือเคล็ดลับทั้งหมด หากต้องการ คุณสามารถปรับความสูงได้โดยให้เนื้อหาอยู่ตรงกลาง

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

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

การจัดแนวบล็อกให้มีขนาดที่ทราบ

วิธีที่ง่ายที่สุดในการใช้ CSS คือการจัดแนวบล็อกที่มีความสูงที่ทราบ (สำหรับการจัดตำแหน่งในแนวตั้ง) หรือความกว้าง (สำหรับการจัดตำแหน่งในแนวนอน)

การจัดตำแหน่งโดยใช้ช่องว่างภายใน

บางครั้งคุณไม่สามารถจัดกึ่งกลางองค์ประกอบได้ แต่เพิ่มเส้นขอบโดยใช้คุณสมบัติ "padding"

ตัวอย่างเช่น มีรูปภาพขนาด 200 x 200 พิกเซล และคุณต้องจัดกึ่งกลางในบล็อกขนาด 240 x 300 เราสามารถตั้งค่าความสูงและความกว้างของบล็อกด้านนอก = 200px และเพิ่ม 20 พิกเซลที่ด้านบนและด้านล่าง และ 50 ทางซ้ายและขวา

.example-wrapper1 ( พื้นหลัง : #535E73 ; width : 200px ; height : 200px ; padding : 20px 50px ; ) จัดตำแหน่งบล็อกที่อยู่ในตำแหน่งที่แน่นอน

หากบล็อกถูกตั้งค่าเป็น "ตำแหน่ง: สัมบูรณ์" ก็สามารถวางตำแหน่งโดยสัมพันธ์กับพาเรนต์ที่ใกล้ที่สุดด้วย "ตำแหน่ง: สัมพันธ์" ในการดำเนินการนี้ คุณต้องกำหนดค่าเดียวกันให้กับคุณสมบัติทั้งหมด (“บน”,”ขวา”,”ล่าง”,”ซ้าย”) ของบล็อกด้านใน เช่นเดียวกับ “margin: auto”

*มีความแตกต่างกันเล็กน้อย: ความกว้าง (ความสูง) ของบล็อกด้านใน + ค่าด้านซ้าย (ขวา, ล่าง, บน) ไม่ควรเกินขนาดของบล็อกหลัก จะปลอดภัยกว่าถ้ากำหนดคุณสมบัติ 0 (ศูนย์) ไปทางซ้าย (ขวา, ล่าง, บน)

.example-wrapper2 ( ตำแหน่ง : สัมพันธ์ ; ความสูง : 250px ; พื้นหลัง : url(space.jpg) ; ) .cat-king ( ความกว้าง : 200px ; ความสูง : 200px ; ตำแหน่ง : สัมบูรณ์ ; บน : 0 ; ซ้าย : 0 ; ล่าง : 0 ; right : 0 ; ระยะขอบ : auto ; พื้นหลัง : url(king.png) ;

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

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

.example-text ( text-align : center ; padding : 10px ; พื้นหลัง : #FF90B8 ; )

เป็นที่น่าสังเกตว่าคุณสมบัตินี้จะใช้งานได้ไม่เพียงกับข้อความเท่านั้น แต่ยังรวมถึงองค์ประกอบแบบอินไลน์ด้วย ("display: inline")

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

.example-wrapper3 ( text-align : center ; background : #FF90B8 ; ) .inline-text ( display : inline-block ; width : 40% ; padding : 10px ; text-align : left ; background : #FFE5E5 ; ) การจัดตำแหน่ง บล็อกโดยใช้ระยะขอบ

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

.lama-wrapper ( height : 200px ; พื้นหลัง : #F1BF88 ; ) .lama1 ( height : 200px ; width : 200px ; พื้นหลัง : url(lama.jpg) ; Margin : 0 auto ; )

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

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

การจัดตำแหน่งในแนวตั้งเป็นปัญหามากกว่ามาก - เห็นได้ชัดว่าสิ่งนี้ไม่ได้ระบุไว้ใน CSS มีหลายวิธีในการบรรลุผลตามที่ต้องการ แต่ทั้งหมดนั้นไม่ได้สวยงามมาก

การจัดแนวด้วยคุณสมบัติความสูงของบรรทัด

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

.example-wrapper4 ( line-height : 100px ; color : #DC09C0 ; พื้นหลัง : #E5DAE1 ; height : 100px ; text-align : center ; )

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

.example-wrapper5 ( line-height : 160px ; height : 160px ; font-size : 0 ; พื้นหลัง : #FF9B00 ; ) .example-wrapper5 .text1 ( display : inline-block ; font-size : 14px ; line-height : 1.5 ; จัดแนวตั้ง : กลาง ; พื้นหลัง : #FFFAF2 ;

บล็อก wrapper ต้องมีการตั้งค่า "font-size: 0" หากคุณไม่ตั้งค่าขนาดตัวอักษรเป็นศูนย์ เบราว์เซอร์จะเพิ่มพิกเซลเพิ่มเติมเล็กน้อย คุณจะต้องระบุขนาดตัวอักษรและความสูงของบรรทัดสำหรับบล็อกด้านใน เนื่องจากคุณสมบัติเหล่านี้สืบทอดมาจากพาเรนต์

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

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

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

.one_product .img_wrapper ( จอแสดงผล : table-cell ; ความสูง : 169px ; แนวตั้ง : กลาง ; ล้น : ซ่อน ; พื้นหลัง : #fff ; ความกว้าง : 255px ; ) .one_product img ( ความสูงสูงสุด : 169px ; ความกว้างสูงสุด : 100 % ; ความกว้างขั้นต่ำ : 140px ; จอแสดงผล : บล็อก ; ระยะขอบ : 0 อัตโนมัติ ;

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

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

และสำหรับองค์ประกอบแบบอินไลน์ คุณสามารถใช้ "vertical-align: middle" ได้ วิธีนี้จะจัดองค์ประกอบทั้งหมดให้ตรงกับ "display: inline" ซึ่งอยู่ในบรรทัดเดียวกันโดยสัมพันธ์กับเส้นกึ่งกลางทั่วไป

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

.example-wrapper6 ( height : 300px ; text-align : center ; background : #70DAF1 ; ) .pudge ( display : inline-block ; Vertical-align : middle ; background : url(pudge.png) ; background-color : # fff ; width : 200px ; height : 200px ; ; แสดงผล : inline-block ; height : 100% ;

หากคุณไม่สนใจผู้ใช้ Explorer 8 มากนัก หรือใส่ใจมากจนยินดีใส่จาวาสคริปต์เพิ่มเติมให้พวกเขา คุณสามารถใช้ "display: flex" ได้ กล่อง Flex สามารถจัดการกับปัญหาการจัดตำแหน่งได้ดี และเพียงเขียน "margin: auto" เพื่อจัดเนื้อหาให้อยู่ตรงกลาง

จนถึงตอนนี้ฉันไม่เคยพบวิธีนี้เลย แต่ไม่มีข้อ จำกัด พิเศษสำหรับมัน

.example-wrapper7 ( จอแสดงผล : flex ; ความสูง : 300px ; พื้นหลัง : #AEB96A ; ) .example-wrapper7 img ( ระยะขอบ : auto ; )

นั่นคือทั้งหมดที่ฉันต้องการเขียนเกี่ยวกับการจัดตำแหน่ง CSS ตอนนี้การจัดเนื้อหาให้อยู่ตรงกลางจะไม่ใช่ปัญหา!

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

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

วิธีแรกที่มีความสูงของเส้น

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

ตัวอย่างแรก การสาธิต #1

ตัวอย่างแรก การสาธิต #1

/* No.1 */ .talign1( border: 1px solid red; height:200px;/* block height */ ) .talign1 > p( line-height:200px;/* ตั้งค่าความสูงของเส้นตามความสูงของบล็อก * / ระยะขอบ :0;/* ลบช่องว่างภายในออก ถ้ามี */ text-align:center;/* จัดข้อความในแนวนอนโดยให้ตรงกลาง */ ช่องว่างภายใน: 0;/* ลบช่องว่างภายใน ถ้ามี */ ) /* สิ้นสุด ลำดับที่ 1*/

ในทำนองเดียวกัน คุณสามารถนำรูปภาพไปวางตรงกลางแนวตั้งได้ แต่โดยการเพิ่มคุณสมบัติใหม่ 1 รายการในแนวตั้ง: กลาง; -

ตัวอย่าง. การสาธิต #2

ตัวอย่าง. การสาธิต #2

/* No.2 */ .talign2( border: 1px solid red; line-height:200px;/* block line height */ ) .talign2 div( text-align:center;/* จัดตำแหน่งองค์ประกอบในแนวนอนตรงกลาง */ ) .talign2 img( Vertical-align:middle;/* จัดภาพในแนวตั้งตรงกลาง */ border: 1px สีดำทึบ; ) /* end №2*/

สอดคล้องกับคุณสมบัติตำแหน่ง

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

ดังนั้น คุณจึงต้องตั้งค่าลบให้กับระยะขอบ ขนาดของการเยื้องด้านบนควรตรงกับความสูงครึ่งหนึ่งของบล็อกภายใน และการเยื้องด้านซ้ายควรตรงกับความกว้างครึ่งหนึ่ง ดังนั้นเราจึงได้จุดศูนย์กลางสัมบูรณ์

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

/* No.3 */ .talign3( เส้นขอบ: 1px สีแดงทึบ; ความสูง:200px;/* ความสูงของบล็อก */ ตำแหน่ง: สัมพันธ์; ) .talign3 div( ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ซ้าย: 50%; ความสูง : 30% ความกว้าง: 50% ระยะขอบ: -5% 0 0 -25%;

การจัดตำแหน่งตามคุณสมบัติของตาราง

ที่นี่เราใช้เทคนิคเก่า โดยเปลี่ยนองค์ประกอบต่างๆ ให้เป็นตารางที่มีเซลล์ ในกรณีนี้คือแท็กตาราง

จะไม่ใช้ แต่จะใช้คุณสมบัติ CSS เช่น display: table; , จอแสดงผล: ตารางเซลล์; - ใน IE เวอร์ชันเก่า วิธีการนี้ใช้ไม่ได้และไม่จำเป็น มีใครใช้มันจริง ๆ บ้างไหม?

ตัวอย่าง. การสาธิต #4

ตัวอย่าง. การสาธิต #4

/* No.4 */ .talign4( ขอบ: 1px สีแดงทึบ; ความสูง:200px;/* ความสูงของบล็อก */ จอแสดงผล: ตาราง; ความกว้าง: 100%; ) .talign4 div( จอแสดงผล: ตาราง-เซลล์; จัดแนวตั้ง: กลาง ; text-align:center ) /* end #4*/

การจัดตำแหน่งด้วยคุณสมบัติดิ้น

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

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

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

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

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

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

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

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

ปิดกั้น.

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

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

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

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

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

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

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

inherit – สืบทอดค่าขององค์ประกอบหลัก

#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 )

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

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

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

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

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