คู่มือนี้สาธิตขั้นตอนการจัดตำแหน่งแนวนอนและแนวตั้งโดยใช้ CSS
จะจัดแนวนอนและแนวตั้งโดยใช้ CSS ได้อย่างไร
นักพัฒนาใช้การจัดตำแหน่ง 'แนวนอน' และ 'แนวตั้ง' เพื่อจัดเรียงและวางตำแหน่งองค์ประกอบบนหน้าเว็บในลักษณะที่เป็นระเบียบมากขึ้น พวกมันมีประโยชน์ในการจัดตำแหน่งองค์ประกอบและเนื้อหา ปุ่มหรือไอคอนการวางตำแหน่ง ฯลฯ ทำตามตัวอย่างด้านล่างเพื่อความเข้าใจที่ดีขึ้น:
การจัดตำแหน่งแนวนอน
ใน CSS คุณสมบัติ text-align ใช้เพื่อจัดข้อความในแนวนอนภายในองค์ประกอบหลัก เยี่ยมชมตัวอย่างโค้ดด้านล่างเพื่อความเข้าใจที่ดีขึ้น:
< ร่างกาย >
< แผนก ระดับ = 'บัญชี' >
< แผนก ระดับ = 'ชิดซ้าย' > Linuxhint จัดชิดซ้าย < / แผนก >
< แผนก ระดับ = 'ศูนย์จัด' > Linuxhint คือ Center Align < / แผนก >
< แผนก ระดับ = 'ชิดขวา' > Linuxhint จัดชิดขวา < / แผนก >
< / แผนก >
< / ร่างกาย >
ในข้อมูลโค้ดด้านบน:
- อันดับแรก ผู้ปกครอง “ แผนก ” องค์ประกอบใช้กับแอตทริบิวต์คลาสที่มีค่าเป็น “ บัญชี '.
- ถัดไป มีการสร้างองค์ประกอบย่อยสามรายการและกำหนดแอตทริบิวต์คลาสให้กับแต่ละ div
- ในตอนท้าย ค่าของ “leftAlign”, “centerAlign” และ “rightAlign” จะถูกจัดเตรียมให้กับคลาส
ตอนนี้ให้ใส่คุณสมบัติ CSS ต่อไปนี้ใน ' <สไตล์> แท็ก:
<สไตล์ >
.leftAlign {
แสดง : อินไลน์บล็อก ;
ความกว้าง : 30% ;
การขยายความ : 20px ;
สีพื้นหลัง : ป่าไม้เขียวขจี ;
จัดข้อความ : ซ้าย ;
}
.centerAlign {
แสดง : อินไลน์บล็อก ;
ความกว้าง : 30% ;
สีพื้นหลัง : สีแดง ;
การขยายความ : 20px ;
จัดข้อความ : ศูนย์ ;
}
.rightAlign {
แสดง : อินไลน์บล็อก ;
ความกว้าง : 30% ;
สีพื้นหลัง : นกเป็ดน้ำ ;
การขยายความ : 20px ;
จัดข้อความ : ขวา ;
}
>
ในบล็อกรหัสด้านบน:
- ขั้นแรก ทั้งสามคลาสจะถูกเลือกแยกกัน จากนั้นใช้คุณสมบัติ CSS “ แสดง ”, “ ความกว้าง ”, “ สีพื้นหลัง ' และ ' การขยายความ ' ถึงพวกเขา. คุณสมบัติเหล่านี้ใช้เพื่อปรับปรุงวัตถุประสงค์ในการแสดงข้อมูล
- ต่อไป ค่าของ “ ซ้าย ”, “ ศูนย์ ' และ ' ขวา ” ให้กับ “ จัดข้อความ ” คุณสมบัติให้กับ “ จัดชิดซ้าย ”, “ centerAlign ', และ ' จัดชิดขวา ” ชั้นเรียนตามลำดับ
หลังจากขั้นตอนการคอมไพล์แล้ว องค์ประกอบ HTML จะมีลักษณะดังนี้:
ภาพรวมด้านบนของเบราว์เซอร์แสดงให้เห็นว่าองค์ประกอบต่างๆ อยู่ในแนวนอนในตำแหน่งด้านซ้าย กึ่งกลาง และด้านขวา
การจัดตำแหน่งแนวตั้ง
ซีเอสเอส “ จัดแนวตั้ง คุณสมบัติ ” จัดองค์ประกอบที่เลือกให้ตรงกับ “ แกน y ” ภายในองค์ประกอบหลัก ค่าที่เป็นไปได้สำหรับคุณสมบัติ 'การจัดแนวแนวตั้ง' คือ ' พื้นฐาน ”, “ ย่อย ”, “ สุดยอด ”, “ สูงสุด ”, “ ข้อความด้านบน ”, “ กลาง ”, “ ด้านล่าง ', และ ' ข้อความด้านล่าง '. อย่างไรก็ตาม นักพัฒนาส่วนใหญ่จะใช้ค่า 'บน' 'กลาง' และ 'ล่าง' ในขณะที่สร้างการออกแบบหน้าเว็บ หากต้องการจัดองค์ประกอบ HTML ที่เลือกไว้ที่ตำแหน่งบนสุด โปรดไปที่ข้อมูลโค้ดด้านล่าง:
< แผนก ระดับ = 'นับ' >< img src = 'hiunsplash.jpg' ความกว้าง = '200px' ความสูง = '200px' >
< ช่วง ระดับ = 'captionTopAlign' > ข้อความนี้จัดชิดด้านบนในแนวตั้งถัดจากรูปภาพ < / ช่วง >
< / แผนก >
ในข้อมูลโค้ดด้านบน:
- ขั้นแรก สร้างพาเรนต์ “ แผนก ” องค์ประกอบและกำหนดค่าของ “ นับ ” ถึง “ ระดับ ' คุณลักษณะ.
- ภายในคอนเทนเนอร์พาเรนต์ ให้ใช้ '
” แท็กและระบุเส้นทางของรูปภาพเป็นค่าให้กับ “ src ' คุณลักษณะ.
- นอกจากนี้ ให้ระบุค่าของ “ 200px ” ทั้ง “ ความกว้าง ' และ ' ความสูง ” คุณลักษณะของ “
” แท็ก
- ถัดไป ใช้ “ ” แท็กและระบุคลาสของ “ คำบรรยายภาพTopAlign '. ในตอนท้าย ให้ข้อมูลจำลองกับมัน
ตอนนี้ เพิ่มคุณสมบัติ CSS เพื่อจัดรูปแบบองค์ประกอบ HTML:
.นับ {ความกว้าง : พอดีเนื้อหา ;
แสดง : ปิดกั้น ;
ขอบซ้าย : 100px ;
การขยายความ : 10px ;
ชายแดน : 2px แข็ง สีแดง ;
}
.captionTopAlign {
แนวตั้ง
ในบล็อกรหัสด้านบน:
- ขั้นแรก เลือกพาเรนต์ “ นับ ” class และระบุค่าของ “fit-content”, “block”, “100px”, “10px” และ “2px solid red” ให้กับ CSS “ ความกว้าง ”, “ แสดง ”, “ ขอบซ้าย ”, “ การขยายความ ' และ ' ชายแดน ' คุณสมบัติ. คุณสมบัติเหล่านี้ใช้เพื่อจัดรูปแบบองค์ประกอบหลัก
- จากนั้นเลือก “ คำบรรยายภาพTopAlign ” class และให้ค่าของ “ สูงสุด ” ถึง CSS “ จัดแนวตั้ง ' คุณสมบัติ. สิ่งนี้ทำให้องค์ประกอบ HTML อยู่ในตำแหน่งบนสุด
หลังจากดำเนินการตามบรรทัดของโค้ดด้านบน หน้าเว็บจะมีลักษณะดังนี้:
ภาพรวมด้านบนแสดงองค์ประกอบ HTML ที่เลือกไว้ด้านบนสุด ในลักษณะเดียวกัน องค์ประกอบสามารถจัดตำแหน่งตรงกลาง ด้านล่าง ฯลฯ
บทสรุป
สำหรับการจัดตำแหน่งแนวนอนและแนวตั้ง ปุ่ม “ จัดข้อความ ' และ ' จัดแนวตั้ง ” มีการใช้คุณสมบัติของ CSS ตามลำดับ คุณสมบัติ 'text-align' อนุญาตให้มีค่าของ ' ซ้าย ”, “ ขวา ”, “ ศูนย์ ' และ ' ปรับ '. ในทางกลับกัน ค่าที่เป็นไปได้สำหรับคุณสมบัติ 'การจัดแนวแนวตั้ง' คือ ' พื้นฐาน ”, “ ย่อย ”, “ สุดยอด ”, “ สูงสุด ”, “ ข้อความด้านบน ”, “ กลาง ”, “ ด้านล่าง ', และ ' ข้อความด้านล่าง '. การจัดตำแหน่งแนวนอนและแนวตั้งช่วยสร้างการออกแบบเว็บที่สะอาดตาและเป็นมืออาชีพ