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

1

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

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

2

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

คอนเทนเนอร์ {

}

ค่านี้ระบุองค์ประกอบที่มี "container" เป็นแอตทริบิวต์ ID การประกาศสไตล์สำหรับองค์ประกอบจะปรากฏขึ้นระหว่างวงเล็บเปิดและปิด หรือคุณสามารถระบุองค์ประกอบโดยใช้ค่าแอตทริบิวต์ class ดังนี้:

.container {

}

สิ่งนี้จะระบุองค์ประกอบต่อไปนี้:

3

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

ความกว้าง: 800px;

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

margin: อัตโนมัติ;

4

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

ความสูง: 90%;

แก้ไขค่าให้เหมาะกับการออกแบบของคุณ หากองค์ประกอบภายในคอนเทนเนอร์ใช้พื้นที่มากกว่านี้และคุณต้องการป้องกันการเลื่อนคุณต้องซ่อนองค์ประกอบมากเกินดังนี้:

ล้น: ซ่อน;

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

5

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

ปลาย

• เว็บเบราว์เซอร์ต่าง ๆ ใช้กฎ CSS ในรูปแบบที่แตกต่างกันดังนั้นให้แน่ใจว่าคุณทดสอบหน้าเว็บของคุณในมากกว่าหนึ่ง

การเตือน

• การซ่อนองค์ประกอบของเว็บเพจมากเกินไปอาจทำให้ผู้ใช้บางคนไม่เห็นเนื้อหาของหน้าเว็บทั้งหมด