เนื้อหา

• ขั้นตอน
• เคล็ดลับ

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

ขั้นตอน

วิธีที่ 1 จาก 2: จัดแนวข้อความด้วย HTML

1. 

   ล้อมรอบแต่ละส่วนที่จะมีการปรับเปลี่ยนการจัดตำแหน่งด้วยแท็ก "div" ซึ่งหมายความว่าจำเป็นต้องเพิ่ม "div" ภายในสัญลักษณ์ "น้อยกว่า" (<) และ "มากกว่า" (>) ก่อนเครื่องหมาย HTML แรกที่จะมีการเปลี่ยนแปลงการจัดตำแหน่ง

2. 

   
   
   กำหนดวิธีที่คุณต้องการแก้ไขการจัดแนวข้อความใน "div" นั้น

3. 

   หากคุณต้องการจัดแนวข้อความไปทางซ้ายให้เปลี่ยนแท็ก "div" เพื่อให้ข้อความต่อไปนี้อยู่ระหว่างสัญลักษณ์ "<>": div style = 'text-align: left'
   • หากคุณต้องการจัดแนวข้อความไปทางขวาให้เปลี่ยนแท็ก "div" เป็น "div style = ’text-align: right’" ภายในสัญลักษณ์ "<>"
   • หากคุณต้องการจัดแนวข้อความให้อยู่ตรงกลางให้เปลี่ยนแท็ก "div" เป็น "div style = ’text-align: center’" ภายในสัญลักษณ์ "<>"
   • หากคุณจำเป็นต้องปรับข้อความให้เปลี่ยนแท็ก "div" เป็น "div style = ’text-align: justify’" ภายในสัญลักษณ์ "<>"

4. 

   
   
   บันทึกการเปลี่ยนแปลงของคุณ

5. 

   ตรวจสอบลักษณะที่ปรากฏของเนื้อหาของคุณเพื่อให้แน่ใจว่าการจัดตำแหน่งทำงานได้ดี
   • หากไม่ได้ผลแสดงว่าไซต์นั้นมีโค้ดเฉพาะในสไตล์ชีตที่แทนที่ "div" แทนที่สไตล์ชีตสำหรับไซต์นั้นโดยการเพิ่ม "style =" text-align: right "" เวอร์ชันที่เหมาะสมภายในแท็กเปิดของแต่ละองค์ประกอบเพื่อให้มีการปรับเปลี่ยนการจัดแนว ตัวอย่างเช่นแท็ก "p" จะกลายเป็น "p style = ’text-align: right’" ภายในสัญลักษณ์ "<>"

6. 

   
   
   ขอให้สนุกกับการดูข้อความของคุณที่แสดงตรงตามที่คุณต้องการ

วิธีที่ 2 จาก 2: การจัดแนวรูปภาพด้วย HTML

1. 

   ค้นหาโค้ด HTML สำหรับรูปภาพที่คุณต้องการจัดแนว

2. 

   แก้ไขแท็ก "img" เพื่อเพิ่มคุณสมบัติ "float" ที่เหมาะสมลงไป
   • หากคุณต้องการให้รูปภาพอยู่ทางซ้ายให้เพิ่ม "style = ’float: left’" ลงในแท็กเพื่อให้มีลักษณะเป็น "img style = ’float: left’" ภายในสัญลักษณ์ "<>"
   • หากคุณต้องการให้รูปภาพอยู่ทางขวาให้เพิ่ม "style = ’float: right’" ลงในแท็กเพื่อให้มีลักษณะเป็น "img style = ’float: right’" ภายในสัญลักษณ์ "<>"
   • หากคุณต้องการให้รูปภาพอยู่ตรงกลางโค้ดจะซับซ้อนกว่าเล็กน้อย ไม่มีคุณสมบัติ "float: center" ดังนั้นคุณต้องเพิ่ม "style = 'align: center; text-align: center'" ลงในแท็กเพื่อให้มีลักษณะเป็น "img style = 'align: center; text-align: center "" อีกครั้งด้วยสัญลักษณ์ "<>"

3. 

   บันทึกรหัสของคุณ

4. 

   เพลิดเพลินกับภาพที่สอดคล้องกันของคุณ!

เคล็ดลับ

• คุณอาจเห็นแท็ก "p align = ’center’" (ภายใน <>) ถูกใช้เพื่อเปลี่ยนการจัดแนวข้อความ หลีกเลี่ยงเนื่องจากมันล้าสมัยและเป็นเพียงเรื่องของเวลาก่อนที่เบราว์เซอร์หลักจะหยุดสนับสนุน
• คำแนะนำในการจัดแนวภาพด้วย HTML จะช่วยให้คุณสามารถจัดแนวส่วนต่างๆกับ HTML ได้ ล้อมรอบส่วนด้วยแท็ก "div" ดังในคำแนะนำเกี่ยวกับวิธีจัดแนวข้อความด้วย HTML เพิ่มคุณสมบัติ "float" ทั้งในแท็ก "div" และ "img" ในทิศทางการจัดแนวรูปภาพ
• หากโค้ดแสดงไม่ถูกต้องเลยเป็นไปได้ว่าไซต์มีตัวกรองเพื่อลบการเข้ารหัส HTML ใด ๆ อย่างไรก็ตามอาจเป็นไปได้ว่าไม่มีเครื่องหมายอัฒภาคเครื่องหมาย "มากกว่า" หรือ "น้อยกว่า" หรือเครื่องหมายคำพูดในการเข้ารหัสของคุณและใครก็ตามที่หายไปจะทำให้โค้ดของคุณไม่ทำงาน ตรวจสอบสิ่งนี้โดยเฉพาะอย่างยิ่งหากมีการใช้โค้ดบางอย่างอย่างถูกต้องในบางที่ไม่ใช่ในบางที่