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

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

DIV คืออะไร

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

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

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

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

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

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

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

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

.example-wrapper1 ( พื้นหลัง : #535E73 ; ความกว้าง : 200px ; ความสูง : 200px ; การขยาย : 20px 50px ; )

การจัดตำแหน่งบล็อกในตำแหน่งที่แน่นอน

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

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

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

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

การจัดตำแหน่งโดยใช้ "text-align: center"

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

ครั้งหนึ่งฉันต้องมีข้อความเพื่อแสดงวิธีการจัดตำแหน่งข้อความโดยใช้ 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" โดยปกติจะใช้คำย่อ: " ระยะขอบ: 0 อัตโนมัติ" (สามารถใช้ค่าใดก็ได้แทนศูนย์) แต่วิธีนี้ไม่เหมาะกับการจัดตำแหน่งในแนวตั้ง

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

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

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

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

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

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

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

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

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

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

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

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

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

คุณต้องสร้างบล็อกเสริมที่มีความสูงเท่ากับความสูงของบล็อกหลัก จากนั้นบล็อกที่ต้องการจะอยู่ตรงกลาง หากต้องการทำสิ่งนี้ จะสะดวกในการใช้องค์ประกอบหลอก: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 ; ความกว้าง : 200px ; ความสูง : 200px ; .riki ( จอแสดงผล : อินไลน์บล็อก ; ความสูง : 100% ; แนวตั้ง : กลาง ; )

จอแสดงผล: ดิ้นและการจัดตำแหน่ง

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

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

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

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

สวัสดี! เรายังคงเชี่ยวชาญพื้นฐานของภาษา HTML ต่อไป มาดูกันว่าคุณต้องเขียนอะไรเพื่อจัดแนวข้อความให้อยู่กึ่งกลาง ความกว้าง หรือขอบ

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

วิธีที่ 1 - ทำงานโดยตรงกับ HTML

จริงๆแล้วมันค่อนข้างง่าย ดูตัวอย่างด้านล่าง

จัดย่อหน้าให้อยู่ตรงกลาง

หากคุณต้องการย้ายส่วนของข้อความด้วยวิธีอื่น ให้ป้อนค่าต่อไปนี้แทนพารามิเตอร์ "center":

• justify – จัดข้อความให้พอดีกับความกว้างของหน้า;
• ขวา – บนขอบด้านขวา;
• ซ้าย - ไปทางซ้าย

ในการเปรียบเทียบ คุณสามารถย้ายเนื้อหาที่อยู่ในส่วนหัว (h1, h2) และคอนเทนเนอร์ (div)

วิธีที่ 2 และ 3 - การใช้สไตล์

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

บล็อกข้อความ

ในแบบฟอร์มนี้ รหัสจะถูกเขียนลงใน HTML โดยตรงเพื่อให้เนื้อหาข้อความอยู่ตรงกลาง

มีอีกวิธีอื่นในการบรรลุผล คุณจะต้องทำสองสามขั้นตอน

ขั้นตอนที่ 1 ในการเขียนโค้ดหลัก

วัสดุข้อความ

ขั้นตอนที่ 2 ในไฟล์ CSS ที่รวมไว้ ให้ป้อนรหัสต่อไปนี้:

Rovno (จัดแนวข้อความ:กึ่งกลาง;)

ฉันสังเกตว่าคำว่า "rovno" เป็นเพียงชื่อของคลาสที่สามารถเรียกต่างกันได้ ทั้งนี้ขึ้นอยู่กับดุลยพินิจของโปรแกรมเมอร์

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

เพียงไม่กี่คำถาม:

• คุณกำลังทำโครงการที่ไม่แสวงหาผลกำไรด้านข้อมูลหรือไม่?
• คุณต้องการให้เว็บไซต์ของคุณมีอันดับที่ดีในเครื่องมือค้นหาหรือไม่?
• คุณต้องการหารายได้ออนไลน์หรือไม่?

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

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

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

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

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

เริ่มจากคำอธิบายทั่วไปของปัญหากันก่อน

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

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

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

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

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

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

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

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

วิธีเส้นความสูง

วิธีนี้ใช้ได้ผลเมื่อคุณต้องการจัดข้อความหนึ่งบรรทัดให้อยู่กึ่งกลางในแนวตั้ง สิ่งที่คุณต้องทำคือตั้งค่าความสูงของบรรทัดให้ใหญ่กว่าขนาดตัวอักษร

ตามค่าเริ่มต้น พื้นที่สีขาวจะกระจายเท่ากันที่ด้านบนและด้านล่างของข้อความ และเส้นจะตั้งกึ่งกลางแนวตั้ง บ่อยครั้งความสูงของเส้นจะเท่ากับความสูงขององค์ประกอบ

HTML:

ซีเอสเอส:

#child ( ความสูงบรรทัด: 200px; )

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

การจัดกึ่งกลางภาพโดยใช้ Line-Height

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

HTML:

ซีเอสเอส:

#parent ( line-height: 200px; ) #parent img ( จัดแนวตั้ง: ตรงกลาง; )

ค่าของคุณสมบัติ line-height ต้องมากกว่าความสูงของรูปภาพ

วิธีการตาราง CSS

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

บันทึก:ตาราง CSS ไม่เหมือนกับตาราง HTML

HTML:

ซีเอสเอส:

#parent (จอแสดงผล: ตาราง;) #child ( จอแสดงผล: table-cell; แนวตั้ง: กลาง; )

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

แตกต่างจากวิธีการข้างต้น ในกรณีนี้ เนื้อหาอาจเป็นไดนามิกได้ เนื่องจากองค์ประกอบ div จะเปลี่ยนขนาดตามเนื้อหา

ข้อเสียของวิธีนี้คือใช้ไม่ได้กับ IE เวอร์ชันเก่า คุณต้องใช้คุณสมบัติ display: inline-block สำหรับคอนเทนเนอร์ที่ซ้อนกัน

ตำแหน่งที่แน่นอนและระยะขอบติดลบ

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

โค้ดตัวอย่างดำเนินการจัดกึ่งกลางแนวนอนและแนวตั้งในเวลาเดียวกัน:

HTML:

ซีเอสเอส:

#parent (ตำแหน่ง: ญาติ;) #child ( ตำแหน่ง: สัมบูรณ์; ด้านบน: 50%; ซ้าย: 50%; ความสูง: 30%; ความกว้าง: 50%; ระยะขอบ: -15% 0 0 -25%; )

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

วิธีการนี้ใช้ไม่ได้กับทุกเบราว์เซอร์

ตำแหน่งและการยืดตัวที่แน่นอน

โค้ดตัวอย่างดำเนินการจัดกึ่งกลางแนวตั้งและแนวนอน

HTML:

ซีเอสเอส:

#parent (ตำแหน่ง: ญาติ;) #child ( ตำแหน่ง: สัมบูรณ์; บน: 0; ล่าง: 0; ซ้าย: 0; ขวา: 0; ความกว้าง: 50%; ความสูง: 30%; ระยะขอบ: อัตโนมัติ; )

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

การตั้งค่าระยะขอบให้สร้างอัตโนมัติทุกด้านจะตั้งค่าเท่ากันทั้ง 4 ด้าน และจัดองค์ประกอบ div ที่ซ้อนกันไว้ตรงกลางบนองค์ประกอบหลัก

ขออภัย วิธีนี้ใช้ไม่ได้กับ IE7 และต่ำกว่า

ช่องว่างด้านบนและด้านล่างเท่ากัน

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

HTML:

ซีเอสเอส:

#parent (ช่องว่างภายใน: 5% 0; ) #child (ช่องว่างภายใน: 10% 0; )

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

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

ตัวอย่างเช่น หากองค์ประกอบหลักมีความสูง 400px และองค์ประกอบที่ซ้อนกันคือ 100px ก็จำเป็นต้องมีช่องว่างภายใน 150px ที่ด้านบนและด้านล่าง

150 + 150 + 100 = 400

การใช้ % ช่วยให้คุณสามารถปล่อยให้การคำนวณอยู่ที่เบราว์เซอร์ได้

วิธีนี้ใช้ได้ผลทุกที่ ข้อเสียคือความจำเป็นในการคำนวณ

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

div แบบลอยตัว

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

HTML:

ซีเอสเอส:

#parent (ความสูง: 250px;) #floater ( float: left; ความสูง: 50%; ความกว้าง: 100%; ขอบล่าง: -50px; ) #child ( ชัดเจน: ทั้งสอง; ความสูง: 100px; )

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

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

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

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

บทสรุป

วิธีการทั้งหมดที่อธิบายไว้นั้นใช้งานง่าย ปัญหาคือไม่มีอันใดที่เหมาะกับทุกกรณี คุณต้องวิเคราะห์โครงการและเลือกโครงการที่เหมาะสมกับความต้องการมากที่สุด