ตำแหน่งของไอเท็มบนเว็บเพจมีความสำคัญต่อการออกแบบโดยรวม แม้ว่าจะมีวิธีอื่น ๆ ในการสร้างรูปแบบเช่นการใช้ตาราง ( ซึ่งเราไม่แนะนำ ) สิ่งที่ ดีที่สุดคือการใช้ CSS
ด้านล่างเราจะดูที่วิธีใช้สไตล์แบบ CSS ในบรรทัดเพื่อจัดเรียงรูปภาพตารางย่อหน้าและอื่น ๆ
หมายเหตุ: วิธีการเดียวกันนี้สามารถใช้กับ สไตล์ชีตภายนอกได้ เช่นกัน แต่เนื่องจากข้อบังคับเหล่านี้มีผลกับแต่ละรายการและอาจจำเป็นต้องใช้วิธีดังกล่าวเป็นวิธีที่ดีที่สุดในการใช้สไตล์ในบรรทัดเช่นสิ่งที่กล่าวถึงด้านล่าง
จัดเรียงข้อความย่อหน้า
แท็กวรรคเป็นจุดเริ่มต้นในการวางหน้าเว็บของคุณ การเปิดและปิดแท็กมีลักษณะดังนี้:
การจัดตำแหน่งเริ่มต้นของข้อความในย่อหน้าอยู่ที่ด้านซ้ายของหน้า แต่คุณสามารถจัดเรียงย่อหน้าของคุณไปทางขวาและตรงกลาง
การใช้คุณสมบัติ float ช่วยให้คุณสามารถจัดย่อหน้าให้ชิดขวาหรือซ้ายขององค์ประกอบหลักได้ องค์ประกอบอื่น ๆ ภายในองค์ประกอบหลักนั้นจะไหลไปรอบองค์ประกอบลอย
เพื่อให้ได้ผลดีที่สุดกับย่อหน้าคุณควรตั้งความกว้างในย่อหน้าที่เล็กกว่าองค์ประกอบของคอนเทนเนอร์ (แม่)
จัดข้อความภายในย่อหน้า
เนื้อหาที่น่าสนใจที่สุดสำหรับข้อความย่อหน้าคือ "justify" ซึ่งบอกให้เบราว์เซอร์แสดงข้อความที่เรียงตามแนวแกนทั้งด้านขวาและด้านซ้ายของหน้าต่าง
เพื่อปรับข้อความในย่อหน้าคุณจะใช้คุณสมบัติ text-align
นอกจากนี้คุณสามารถจัดเรียงข้อความทั้งหมดภายในย่อหน้าทางด้านขวาหรือด้านซ้าย (ค่าเริ่มต้น) โดยใช้คุณสมบัติ text-align
คุณสมบัติการจัดตำแหน่งข้อความจะจัดเรียงข้อความภายในองค์ประกอบ ในทางเทคนิคไม่ควรจัดแนวภาพที่มีอยู่ภายในย่อหน้าหรือองค์ประกอบอื่น ๆ แต่เบราว์เซอร์ส่วนใหญ่ถือว่าภาพเป็นบรรทัดในสำหรับพร็อพเพอร์ตี้นี้
จัดเรียงรูปภาพ
การใช้คุณสมบัติ float ในแท็กรูปภาพคุณสามารถกำหนดตำแหน่งของภาพบนหน้าเว็บและวิธีการที่ข้อความจะห่อหุ้มไว้
เช่นเดียวกับย่อหน้าด้านบนคุณสมบัติสเปรดชีตในแท็กรูปภาพจะวางตำแหน่งรูปภาพของคุณบนหน้าเว็บและบอกเบราว์เซอร์ว่าจะส่งข้อความและองค์ประกอบอื่น ๆ รอบรูปภาพนั้นอย่างไร
ข้อความตามแท็กรูปภาพด้านบนจะไหลไปรอบ ๆ ภาพไปทางขวาตามภาพที่ปรากฏทางด้านซ้ายของหน้าจอ
หากต้องการให้ข้อความหยุดการตัดภาพรอบ ๆ ภาพฉันใช้พร็อพเพอร์ตี้ที่ชัดเจน:
การจัดตำแหน่งมากกว่าย่อหน้า
อย่างไรก็ตามถ้าคุณต้องการจัดตำแหน่งมากกว่าแค่ย่อหน้าหรือรูปภาพ? คุณสามารถใส่พร็อพเพอร์ตี้สไตล์ในทุกย่อหน้าได้ แต่มีแท็กที่คุณสามารถใช้ที่มีประสิทธิภาพมากขึ้น:
เพียงแค่ล้อมรอบข้อความและรูปภาพ (รวมถึง แท็ก HTML ) ด้วยแท็กและคุณสมบัติสไตล์ (float หรือ text-align) และทุกอย่างในส่วนนั้นจะจัดเรียงตามที่คุณต้องการ
โปรดจำไว้ว่าการจัดแนวที่เพิ่มลงในย่อหน้าหรือรูปภาพภายในส่วนนี้จะได้รับการเคารพโดยแทนที่ด้วยแท็ก