วิธีการจัดกึ่งกลางรายการแนวนอนใน Div ใน CSS

เนื้อหา

• คำสั่ง

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

คำสั่ง

คุณสามารถใช้ CSS และ HTML เพื่อควบคุมลักษณะที่ปรากฏของหน้าเว็บของคุณ (รูปภาพ Comstock / Stockbyte / Getty)

1. เปิดไฟล์ HTML ของคุณในโปรแกรมแก้ไขข้อความเช่น Windows Notepad

2. เพิ่ม CSS สไตล์ที่ต้องการลงในรายการแนวนอนในส่วน "" ของไฟล์ HTML ของคุณโดยเพิ่มรหัสต่อไปนี้:

   type = "text / css"> .myclass {text-align: center; } .myclass ul {width: 275px; ขอบ: 0px อัตโนมัติ}. ระดับเซลล์ li {display: block; ลอย: ซ้าย; ความสูง: 50px; line-height: 50px; ขอบ: 5px; ความกว้าง: 125px; เส้นขอบ: สีดำทึบ 1px; }

   ความกว้างของรายการ (ul) หมายถึงผลรวมของความกว้างและระยะขอบของรายการแนวนอน (li)

3. สร้างรายการแนวนอนในส่วน ">" ของไฟล์ HTML โดยเพิ่มรหัสต่อไปนี้:

   • รายการแรก
   • รายการที่สองใน div

   แท็ก "ul" ระบุรายการที่ไม่ได้เรียงลำดับ แท็ก "li" สอดคล้องกับรายการในรายการ รายการใช้สไตล์ CSS ที่ตรงกับที่กำหนดไว้ข้างต้น

   
   

4. บันทึกไฟล์ HTML และโหลดบนเว็บเซิร์ฟเวอร์ของคุณเพื่อดูรายการแนวนอนและกึ่งกลาง