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

DIV คืออะไร

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

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

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

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

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

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

การจัดศูนย์กลาง 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% สำหรับแกนแนวตั้งและแนวนอน ซึ่งจะทำให้เบราว์เซอร์ชดเชยองค์ประกอบจากตำแหน่งปัจจุบันเป็นความกว้างและความสูงครึ่งหนึ่ง ต้องระบุคุณสมบัติความกว้างและความสูง:

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML และลูกหลานของมัน และจัดแนว

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

สำหรับการตรวจสอบความถูกต้อง (คำนี้อธิบายไว้โดยละเอียดในบทความ "") ข้อกำหนด html เองก็ประณามการใช้งาน < ศูนย์>เนื่องจากเพื่อความถูกต้องจึงจำเป็นต้องใช้การเปลี่ยนแปลง ประเภทเอกสาร>.

ประเภทนี้ยอมให้องค์ประกอบต้องห้ามผ่านไปได้

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

ด้านล่างนี้ฉันจะยกตัวอย่างโดยฉันจะวางรูปภาพและย่อหน้าไว้ตรงกลาง

เนื้อหานี้จะเป็นศูนย์กลาง

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

ในตัวอย่างที่ฉันใช้ จัด = "กลาง"- ด้วยเหตุนี้ ภาพจึงถูกจัดเรียงเพื่อให้ประโยคตั้งอยู่ตรงกลางภาพอย่างชัดเจน

เครื่องมือจัดกึ่งกลางใน css

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

เรามาเริ่มด้วยคุณสมบัติแรกของการจัดกึ่งกลางข้อความ - นี่คือ ข้อความ-จัดตำแหน่ง.

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

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

ประโยคทางด้านขวา

ประโยคที่ใช้จุดสิ้นสุด

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

ค ในอี ตเกี่ยวกับถึง

ค ในอี ตเกี่ยวกับถึง

การเยื้อง

และในที่สุดเราก็มาถึงการเยื้องย่อหน้า ภาษา CSS ใช้คุณสมบัติพิเศษที่เรียกว่า เยื้องข้อความ.

ด้วยความช่วยเหลือคุณสามารถสร้างทั้งเส้นสีแดงและส่วนที่ยื่นออกมา (คุณต้องระบุค่าลบ)

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

นี่คือคุณสมบัติการเยื้องข้อความแบบธรรมดา

งานเค้าโครงที่พบบ่อยมากคือการจัดแนวข้อความในแนวตั้งในบล็อก div

หากโดยปกติไม่มีปัญหากับการจัดตำแหน่งข้อความในแนวนอน (เราใช้คุณสมบัติ text-align:center และทุกอย่างจะเรียบร้อยดี) การจัดตำแหน่งตามแนวตั้งจะซับซ้อนขึ้นเล็กน้อย

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

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

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

มีสองวิธีในการออกจากสถานการณ์นี้:

สำหรับผู้ที่ต้องการรับชมทุกสิ่งในวิดีโอ:

สำหรับผู้ที่รักข้อความ โปรดอ่านด้านล่างเพื่อดูวิธีแก้ไขปัญหานี้

วิธี ก.วิธีแก้ไขประการหนึ่งคือการวางข้อความไม่อยู่ในองค์ประกอบ div แต่อยู่ในเซลล์ตาราง

บรรทัดที่ 1 บรรทัดที่ 2 บรรทัดที่ 3

วิธี ข.ใช้คุณสมบัติ display:table-cell;

บรรทัดที่ 1

บรรทัดที่ 2

บรรทัดที่ 3

ปัญหาหนึ่งคือไม่รองรับคุณสมบัตินี้ อินเทอร์เน็ตเอ็กซ์พลอเรอร์เวอร์ชัน 6-7

สถานการณ์ที่ 1จัดแนวข้อความหนึ่งบรรทัด

ลองดูตัวอย่างง่ายๆ

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

เส้นที่ควรจัดแนวตั้ง

วิธีนี้ใช้ได้ผลดีเมื่อคุณมีข้อความเพียงบรรทัดเดียว

สถานการณ์ที่ 2หากคุณทราบความกว้างและความสูงที่แน่นอนของบล็อกลูก ซึ่งเป็นที่ตั้งของข้อความ

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

บรรทัดที่ 1

บรรทัดที่ 2

บรรทัดที่ 3

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

หากคุณไม่ต้องการการสนับสนุนสำหรับเบราว์เซอร์รุ่นเก่า ตัวเลือกนี้จะเหมาะสมที่สุด

อย่างที่คุณเห็นงานง่าย ๆ เช่นการจัดข้อความตรงกลางกลายเป็นว่าไม่ง่ายในทางปฏิบัติ

การจัดแนวเนื้อหาในแนวนอนซึ่งมีคุณสมบัติ float สามารถทำได้ง่ายมาก และยังข้ามเบราว์เซอร์ได้อย่างสมบูรณ์ (ทำงานใน Opera 8+, Firefox 3+, IE 5.5+)

ตัวอย่างการจัดตำแหน่งบล็อก div

หากต้องการจัดแนวบล็อกลอยหรือหลายบล็อกในแถว คุณต้องมีบล็อกภายนอกอีกบล็อกหนึ่ง บล็อกด้านนอกและบล็อกด้านในถูกกำหนดตำแหน่ง: สัมบูรณ์; และลอย: ซ้าย; กำหนดซ้ายภายนอก: 50%; และสำหรับบล็อกภายในที่ถูกต้อง: 50%; - วิธีใช้ float: right; จำเป็นต้องกำหนดสิทธิ์การมอบหมายภายนอก: 50%; และสำหรับบล็อกภายในที่เหลือ: 50%; - ฉันแนะนำให้ล้างโฟลตโดยวางบล็อกที่มีคุณสมบัติ clear: ทั้งคู่; -

ด้วยวิธีนี้คุณสามารถบรรลุศูนย์กลางดังต่อไปนี้:

มีขอบสีเขียว หน่วยในร่มด้วย id = block-inner บล็อกด้านนอกที่มี id = block จะมีเส้นขอบสีแดงเป็นระยะ ๆ

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

#block ( ตำแหน่ง: ญาติ; ลอย: ซ้าย; ซ้าย: 50%; เส้นขอบ: 1px ประ #a00; ) #block-inner ( ตำแหน่ง: ญาติ; ลอย: ซ้าย; ขวา: 50%; เส้นขอบ: 2px ทึบ #0a0; ช่องว่างภายใน : 10px; ) #page (ล้น: ซ่อนไว้; )

ตัวอย่างการจัดตำแหน่งรายการเมนู

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

ตัวอย่างเช่น คุณสามารถจัดแนวเมนูได้ดังนี้:

รายการ li ของรายการ ul มีเส้นขอบสีเขียว และรายการ ul มีเส้นขอบสีแดงประ

โค้ด HTML สำหรับตัวอย่างด้านล่างนี้มีลักษณะดังนี้:

• จัดเรียงรายการที่ 1
• จัดเรียงรายการที่ 2
• จัดให้ตรงข้อ 3
• จัดให้ตรงข้อ 4
• จัดเรียงรายการที่ 5

โค้ด CSS สำหรับตัวอย่างด้านล่างนี้มีลักษณะดังนี้:

#menu ( ตำแหน่ง: ญาติ; ลอย: ซ้าย; ซ้าย: 50%; เส้นขอบ: 1px ประ #a00; สไตล์รายการ: ไม่มี; ระยะขอบ: 0; การขยาย: 0; ) #menu li ( ตำแหน่ง: ญาติ; ลอย: ซ้าย; ขวา: 50%; เส้นขอบ: 2px solid #0a0; padding: 10px; #page (ล้น: ซ่อนเร้น; )

มันค่อนข้างง่าย ฉันขอให้คุณประสบความสำเร็จในการเรียนรู้วิธีการใหม่ๆ

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

1. การจัดตำแหน่งแนวนอนให้อยู่กึ่งกลางของบล็อก/หน้า

1.1. หากระบุความกว้างของบล็อก:

div ( width: 300px; ระยะขอบ: 0 auto; /*จัดกึ่งกลางองค์ประกอบในแนวนอนภายในบล็อกหลัก*/ )

หากคุณต้องการจัดแนวองค์ประกอบอินไลน์ด้วยวิธีนี้ จะต้องตั้งค่าให้แสดง: block;

1.2. หากบล็อกซ้อนอยู่ในบล็อกอื่นและไม่ได้ระบุ/ระบุความกว้าง:

.wrapper(จัดข้อความ: กึ่งกลาง;)

1.3. หากบล็อกมีความกว้างและจำเป็นต้องอยู่กึ่งกลางบล็อกหลัก:

.wrapper (ตำแหน่ง: สัมพันธ์; /*ตั้งค่าตำแหน่งสัมพัทธ์สำหรับบล็อกหลัก เพื่อให้เราสามารถวางตำแหน่งบล็อกไว้ข้างในได้อย่างแน่นอน*/) .box ( width: 400px; ตำแหน่ง: แน่นอน; ซ้าย: 50%; ระยะขอบซ้าย: -200px; / *เลื่อนบล็อกไปทางซ้ายเป็นระยะทางเท่ากับครึ่งหนึ่งของความกว้าง*/ )

1.4. หากบล็อกไม่ได้ระบุความกว้าง คุณสามารถจัดกึ่งกลางบล็อกได้โดยใช้บล็อกหลัก:

.wrapper (text-align: center; /*วางเนื้อหาของบล็อกไว้ตรงกลาง*/) .box ( display: inline-block; /*จัดเรียงบล็อกในแนวนอน*/ margin-right: -0.25em; /* ลบช่องว่างที่เหมาะสมระหว่างบล็อก*/ )

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

2.1. หากข้อความครอบคลุมหนึ่งบรรทัด เช่น สำหรับปุ่มและรายการเมนู:

.button ( ความสูง: 50px; ความสูงบรรทัด: 50px; )

2.2. หากต้องการจัดแนวบล็อกในแนวตั้งภายในบล็อกหลัก:

.wrapper (ตำแหน่ง: สัมพันธ์;).box ( ความสูง: 100px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ระยะขอบ: -50px 0 0 0; )

2.3. การจัดแนวตั้งตามประเภทตาราง:

.wrapper ( จอแสดงผล: ตาราง; ความกว้าง: 100%; ) .box ( จอแสดงผล: ตารางเซลล์ ความสูง: 100px; การจัดแนวข้อความ: กึ่งกลาง; การจัดแนวแนวตั้ง: ตรงกลาง; )

2.4. หากบล็อกมีความกว้างและความสูงที่กำหนด และจำเป็นต้องอยู่กึ่งกลางบล็อกหลัก:

.wrapper ( ตำแหน่ง: ญาติ; ) .box ( ความสูง: 100px; ความกว้าง: 100px; ตำแหน่ง: สัมบูรณ์; บน: 0; ขวา: 0; ล่าง: 0; ซ้าย: 0; ระยะขอบ: อัตโนมัติ; ล้น: อัตโนมัติ; /*ถึง เนื้อหาไม่แพร่กระจาย */ )

2.5. ตำแหน่งที่แน่นอนที่กึ่งกลางของหน้า/บล็อกโดยใช้การแปลง CSS3:

หากมีการระบุมิติสำหรับองค์ประกอบ

div ( width: 300px; /*กำหนดความกว้างของบล็อก*/ height:100px; /*กำหนดความสูงของบล็อก*/ แปลงร่าง: แปล(-50%, -50%); ตำแหน่ง: สัมบูรณ์; ด้านบน: 50 %; เหลือ: 50% ;

หากองค์ประกอบไม่มีมิติและไม่ว่างเปล่า

ข้อความบางส่วนที่นี่

h1 ( ระยะขอบ: 0; แปลง: แปล (-50%, -50%); ตำแหน่ง: สัมบูรณ์; บน: 50%; ซ้าย: 50%; )