จัดองค์ประกอบภาพข้อความและบล็อกเมื่อสร้างเว็บไซต์
หากคุณกำลัง เรียนรู้วิธีสร้างเว็บไซต์ หนึ่งในเทคนิคที่ใช้บ่อยที่สุดที่คุณต้องใช้หลักคือทำอย่างไรจึงจะให้ศูนย์กลางรายการในหน้าต่างเบราเซอร์ ซึ่งอาจหมายถึงการวางแนวกึ่งกลางของภาพบนหน้าเว็บหรืออาจเป็นข้อความที่เน้นความเป็นศูนย์กลางเหมือนพาดหัวข่าวซึ่งเป็นส่วนหนึ่งของการออกแบบ
วิธีที่เหมาะสมในการทำให้ภาพหรือข้อความเป็นศูนย์กลางของภาพหรือแม้แต่เว็บเพจทั้งหมดของคุณคือการใช้ Cascading Style Sheets (CSS) คุณสมบัติส่วนใหญ่สำหรับการจัดตำแหน่งศูนย์กลางอยู่ใน CSS ตั้งแต่เวอร์ชัน 1.0 และทำงานได้ดีกับ CSS3 และ เว็บเบราเซอร์ สมัยใหม่
เช่นเดียวกับหลาย ๆ ด้านของการออกแบบเว็บมีหลายวิธีในการใช้ CSS เพื่อจัดองค์ประกอบของศูนย์ในหน้าเว็บ ลองมาดูวิธีต่างๆในการใช้ CSS เพื่อให้ได้ภาพที่ดู
เกี่ยวกับภาพรวมของการใช้ CSS กับองค์ประกอบศูนย์กลางใน HTML
การให้ความสำคัญกับ CSS อาจเป็นเรื่องท้าทายสำหรับนักออกแบบเว็บที่เริ่มต้นเนื่องจากมีวิธีการต่างๆมากมายในการทำให้รูปแบบภาพนี้สมบูรณ์แบบ ในขณะที่ความหลากหลายของวิธีการอาจเป็นนักพัฒนาเว็บที่เก่งหรือเก่งที่รู้ว่าไม่ได้ใช้เทคนิคทั้งหมดทำงานกับองค์ประกอบทั้งหมดนี้อาจเป็นความท้าทายอย่างมากสำหรับผู้เชี่ยวชาญด้านเว็บรุ่นใหม่ ๆ เนื่องจากวิธีการต่างๆที่หลากหลายหมายความว่าพวกเขาจำเป็นต้องรู้ว่าควรใช้วิธีใด สิ่งที่ดีที่สุดคือการทำความเข้าใจเกี่ยวกับแนวทางต่างๆ เมื่อคุณเริ่มใช้งานคุณจะได้เรียนรู้วิธีการที่ดีที่สุดในกรณีใด
ในระดับสูงคุณสามารถใช้ CSS เพื่อ:
- ข้อความกึ่งกลาง
- กำหนดศูนย์องค์ประกอบระดับบล็อก (เช่นแผนก)
- ศูนย์รูปภาพ
- แนวกึ่งกลางบล็อกหรือภาพ
หลายปีที่ผ่านมานักออกแบบเว็บสามารถใช้องค์ประกอบ
เน้นข้อความด้วย CSS
สิ่งที่ง่ายที่สุดในการจัดกึ่งกลางบนเว็บเพจคือข้อความ มีคุณสมบัติแบบเดียวที่คุณจำเป็นต้องทราบเพื่อทำดังนี้: จัดตำแหน่งข้อความ ใช้สไตล์ CSS ด้านล่างเช่น:
p.center {text-align: center; }
กับบรรทัดของ CSS นี้ทุกย่อหน้าที่เขียนด้วยศูนย์กลางจะถูกจัดให้อยู่กึ่งกลางในแนวนอนภายในองค์ประกอบหลัก ตัวอย่างเช่นถ้าย่อหน้าอยู่ภายในส่วนหนึ่งซึ่งหมายความว่าเป็นลูกของส่วนนั้นจะเป็นศูนย์กลางในแนวนอนภายใน
นี่คือตัวอย่างของคลาสที่ใช้ในเอกสาร HTML:
ข้อความนี้เป็นศูนย์กลาง
เมื่อข้อความตรงกลางกับคุณสมบัติการจัดตำแหน่งข้อความโปรดจำไว้ว่าจะมีศูนย์กลางอยู่ภายในองค์ประกอบที่มีอยู่และไม่จำเป็นต้องมีศูนย์กลางอยู่ภายในเต็มหน้าด้วย โปรดจำไว้ว่าข้อความกึ่งกลางที่ถูกต้องอาจเป็นเรื่องยากสำหรับการอ่านเนื้อหาขนาดใหญ่ดังนั้นจึงควรใช้สไตล์นี้ให้มากที่สุด ข้อความพาดหัวและข้อความขนาดเล็กเช่นข้อความทีเซอร์สำหรับบทความหรือเนื้อหาอื่น ๆ มักเป็นเรื่องง่ายในการอ่านและปรับแต่งเมื่ออยู่กึ่งกลาง แต่ส่วนของข้อความขนาดใหญ่เช่นเดียวกับบทความเต็มรูปแบบจะเป็นเรื่องที่ท้าทายที่จะใช้เนื้อหาถ้าเนื้อหานั้นสมบูรณ์ ธรรม โปรดจำไว้ว่าการ อ่านง่ายเป็นสิ่งสำคัญเสมอ เมื่อพูดถึงข้อความเว็บไซต์!
การรวมบล็อกเนื้อหาด้วย CSS
บล็อกเป็นองค์ประกอบใด ๆ บนหน้าเว็บของคุณที่มีความกว้างที่กำหนดไว้และมีการสร้างเป็นองค์ประกอบระดับบล็อก บ่อยครั้งบล็อคเหล่านี้ถูกสร้างขึ้นโดยใช้องค์ประกอบ HTML
div.center {
margin: 0 auto;
ความกว้าง: 80em;
}
การชวเลข CSS นี้สำหรับพร็อพเพอร์ตี้ margin จะกำหนดระยะขอบด้านบนและด้านล่างให้เป็นค่า 0 ในขณะที่ด้านซ้ายและขวาจะใช้ "auto" นี่เป็นการใช้พื้นที่ที่มีอยู่และแบ่งพื้นที่ให้เท่ากันระหว่างสองฝั่งของหน้าต่างมุมมองซึ่งจะช่วยให้องค์ประกอบบนหน้าเป็นไปอย่างมีประสิทธิภาพ
นี่ใช้ใน HTML:
แต่ข้อความที่ด้านในอยู่ชิดซ้าย
ตราบเท่าที่บล็อกของคุณมีความกว้างที่กำหนดไว้จะรวมศูนย์ไว้ภายในองค์ประกอบที่ประกอบด้วย ข้อความที่มีอยู่ในบล็อกนั้นจะไม่ถูกจัดให้อยู่กึ่งกลางภายใน แต่จะเป็นข้อความที่ถูกทิ้งไว้ นี่เป็นข้อความที่ผิดพลาดในการเริ่มต้นของเว็บเบราเซอร์ ถ้าคุณต้องการให้ข้อความเป็นศูนย์กลางเช่นกันคุณสามารถใช้คุณสมบัติการจัดตำแหน่งข้อความที่เราได้กล่าวถึงก่อนหน้านี้ร่วมกับวิธีการนี้เพื่อแบ่งส่วนได้
เน้นรูปภาพด้วย CSS
ในขณะที่เบราว์เซอร์ส่วนใหญ่จะแสดงภาพที่มีศูนย์กลางอยู่โดยใช้คุณสมบัติการจัดตำแหน่งข้อความเดียวกันที่เราได้ตรวจสอบไว้ก่อนหน้าย่อหน้าแล้วไม่ควรใช้เทคนิคนั้นเนื่องจากไม่ได้แนะนำโดย W3C เนื่องจากไม่แนะนำให้มีโอกาสที่เบราว์เซอร์เวอร์ชันอนาคตจึงเลือกที่จะละเว้นวิธีนี้
แทนที่จะใช้การจัดตำแหน่งข้อความตรงกลางภาพคุณควรบอกเบราว์เซอร์อย่างชัดเจนว่ารูปภาพเป็นองค์ประกอบระดับบล็อก ด้วยวิธีนี้คุณสามารถตั้งศูนย์ไว้ตามที่คุณต้องการได้ นี่คือ CSS เพื่อให้สิ่งนี้เกิดขึ้น:
img.center {
แสดง: บล็อก;
margin-left: auto;
ขอบขวา: อัตโนมัติ;
}
และนี่คือ HTML ที่สำหรับภาพที่เราต้องการให้เป็นศูนย์กลาง:
นอกจากนี้คุณยังสามารถวางแนววัตถุโดยใช้ CSS ในบรรทัด (ดูด้านล่าง) แต่วิธีนี้ไม่แนะนำเนื่องจากจะเพิ่มรูปแบบภาพลงในมาร์กอัพ HTML ของคุณ โปรดจำไว้ว่าเราต้องการแยกลักษณะและโครงสร้างเพื่อที่จะเพิ่มรูปแบบ CSS ให้กับโค้ด HTML ของคุณด้วยการแบ่งแยกการแบ่งแยกและด้วยเหตุนี้จึงควรหลีกเลี่ยงเมื่อทำได้
จัดองค์ประกอบตรงกลางด้วย CSS
การจัดแนววัตถุในแนวตั้งได้รับความท้าทายในการออกแบบเว็บเสมอ แต่ด้วยการเปิดตัว CSS Flexible Box Layout Module ใน CSS3 ปัจจุบันมีวิธีการดำเนินการแล้ว
การจัดตำแหน่งในแนวตั้งทำงานคล้ายกับการจัดแนวแนวนอนที่ครอบคลุมด้านบน พร็อพเพอร์ตี้ CSS มีแนวตั้งตรงกับค่ากลาง
.vcenter {
แนวตั้ง: กลาง;
}
ข้อเสียของวิธีนี้คือเบราเซอร์ที่ใช้งานไม่ได้สนับสนุน CSS FlexBox แม้ว่าจะมีการใช้ CSS layout ขึ้นมาใหม่มากขึ้นเรื่อย ๆ ก็ตาม! เบราว์เซอร์สมัยใหม่ทุกวันนี้สนับสนุนรูปแบบ CSS นี้แล้ว ซึ่งหมายความว่าข้อกังวลเฉพาะของคุณกับ Flexbox จะเป็นเวอร์ชันเบราว์เซอร์ที่เก่ากว่ามาก
หากคุณมีปัญหาเกี่ยวกับเบราว์เซอร์รุ่นเก่า W3C แนะนำให้คุณวางข้อความกึ่งกลางในแนวตั้งในคอนเทนเนอร์โดยใช้วิธีการต่อไปนี้:
- วางองค์ประกอบไว้กึ่งกลางภายในองค์ประกอบที่ประกอบด้วยเช่น div
- ตั้งค่าความสูงต่ำสุดขององค์ประกอบที่ประกอบด้วย
- ประกาศว่ามีองค์ประกอบเป็นเซลล์ตาราง
- ตั้งการจัดแนวแนวตั้งเป็น "กลาง"
ตัวอย่างเช่นนี่คือ CSS:
.vcenter {
min-height: 12em;
แสดง: ตารางเซลล์;
แนวตั้ง: กลาง;
}
และนี่คือ HTML:
ข้อความนี้อยู่ตรงกลางในช่อง
การจัดวางแนวตั้งแนวตั้งและเวอร์ชันเก่ากว่าของ Internet Explorer
มีบางวิธีที่จะบังคับ Internet Explorer (IE) ให้อยู่ตรงกลางจากนั้นใช้ความคิดเห็นตามเงื่อนไขเพื่อให้ IE เห็นรูปแบบเท่านั้น แต่มีลักษณะเป็น verbose และน่าเกลียด ข่าวดีก็คือเมื่อมีการตัดสินใจล่าสุดของ Microsoft ในการปล่อยการสนับสนุน IE เวอร์ชันเก่าเบราว์เซอร์ที่ไม่สนับสนุนเหล่านี้น่าจะกำลังจะออกไปในเร็ว ๆ นี้ทำให้นักออกแบบเว็บใช้รูปแบบที่ทันสมัยเช่น CSS FlexBox ได้ง่ายขึ้นซึ่งจะทำให้ทุกรูปแบบ CSS, ไม่เพียง แต่เน้นตรงกลางและง่ายขึ้นสำหรับนักออกแบบเว็บทั้งหมด