ดาวน์โหลดบทความ
ดาวน์โหลดบทความ
บทความวิกิฮาวนี้จะแนะนำวิธีการ center คือจัดหน้าให้ข้อความอยู่ตรงกลางในเว็บ HTML โดยใช้ Cascading Style Sheets (CSS) ปกติคุณทำให้ข้อความอยู่กลางหน้าใน HTML ได้ด้วยแท็ก <center> แต่ตอนนี้แท็กนี้ obsolete คือตกรุ่นไปแล้วในแทบทุกเบราว์เซอร์ [1] X แหล่งข้อมูลอ้างอิง
ขั้นตอน
-
เปิดไฟล์ที่มี CSS styles. ถึงแท็ก <center> จะ obsolete ไปแล้ว แต่ก็สร้าง element ใหม่เพื่อเพิ่มในส่วนไหนก็ได้ของหน้า เพื่อทำให้ข้อความอยู่ตรงกลางภายในขอบเขตที่กำหนด ถ้าไม่มีไฟล์ CSS แยก ให้หา styles ด้านบนของไฟล์ HTML ระหว่างแท็ก "<style>" กับ "</style>" [2] X แหล่งข้อมูลอ้างอิง
- ถ้ายังไม่มีแท็ก <style> กับ </style> ให้ใส่ไว้ล่าง <body> ทางด้านบนของไฟล์ ดังต่อไปนี้:
<!DOCTYPE html> < html > < body > < style > </ style >
-
กำหนด class ที่ใช้จัดข้อความให้อยู่ตรงกลาง. แท็ก <div> จะเป็นตัวกำหนดให้โค้ด HTML อ้างถึงส่วนใดส่วนหนึ่งของข้อความ เพราะงั้นต้องกำหนด class ให้แท็ก โดยพิมพ์โค้ดต่อไปนี้ในช่องว่างระหว่างแท็ก "style" ต้องกด ↵ Enter 2 ครั้งด้วยหลังบรรทัดแรก
div . a { }
-
ใส่คุณสมบัติ text-align . พิมพ์ text-align: center; ในช่องว่างระหว่าง 2 ปีกกาในหัวข้อ div.a ก็จะได้ header ออกมาเป็น
<! DOCTYPE html > < html > < body > < style > div . a { text-align : center ; } </ style >
-
ใส่แท็ก div ที่เหมาะสมให้ข้อความที่จะปรับมาตรงกลาง. โดยใส่แท็ก <div class="a"> ด้านบนข้อความที่จะจัดอยู่ตรงกลาง แล้วปิดด้วยแท็ก </div> ล่างข้อความนั้น เช่น ถ้าจะให้ header และข้อความในย่อหน้า ขยับมาอยู่ตรงกลางหน้า ก็ให้พิมพ์โค้ดต่อไปนี้
< div class = "a" > < h1 > ย ิ นด ี ต ้ อนร ั บส ู่ เว ็ บของฉ ั น </ h1 > < p > เว ็ บน ี้ จ ั ดทำเพ ื่ อการศ ึ กษาเท ่ าน ั้ น </ p > </ div >
-
ใช้แท็ก div.a เพื่อจัดส่วนอื่นให้อยู่กลางหน้า. ถ้าจะจัด element อื่นมาอยู่กลางหน้า (เช่น เนื้อหาระหว่างแท็กอย่าง <p></p> กับ <h2></h2> ) ให้พิมพ์ <div class="a"> หน้าข้อความ แล้วปิดท้ายด้วย </div> ปกติคำสั่งปรับไอเท็มให้มาอยู่ตรงกลางคือ "div.a" ใช้คำสั่งนี้แล้วก็จะจัดหน้าให้ข้อความมาอยู่ตรงกลางเช่นกัน
< style > div . a { text-align : center ; } </ style > < div class = "a" > < h2 > ย ิ นด ี ร ั บการสน ั บสน ุ น </ h2 > < p > ขอขอบค ุ ณ </ p > </ div >
-
ตรวจทานโค้ด. ถึงจะเนื้อหาต่างกัน แต่โค้ดที่ได้จะออกมาประมาณนี้ [3] X แหล่งข้อมูลอ้างอิง
<! DOCTYPE html > < html > < body > < style > div . a { text-align : center ; } </ style > < div class = "a" > < h1 > ย ิ นด ี ต ้ อนร ั บส ู่ เว ็ บของฉ ั น </ h1 > < p > เว ็ บน ี้ จ ั ดทำเพ ื่ อการศ ึ กษาเท ่ าน ั้ น </ p > </ div > < div class = "a" > < h2 > ย ิ นด ี ร ั บการสน ั บสน ุ น </ h2 > < p > ขอขอบค ุ ณ </ p > </ div > </ body > </ html >
โฆษณา
-
1เปิดโค้ด HTML. เป็นวิธีการใช้แท็ก HTML <center> ที่ตอนนี้ obsolete หรือเลิกใช้ไปแล้ว ตั้งแต่ธันวาคม 2561 เป็นต้นมา บางเบราว์เซอร์อาจยังพอรองรับบ้าง แต่ไม่แนะนำให้ใช้แท็กนี้ในระยะยาว
-
หาข้อความที่จะจัดให้อยู่ตรงกลาง. เลื่อนลงไปจนเจอ header เนื้อหา หรือข้อความส่วนอื่นๆ ที่อยากจัดให้อยู่กลางหน้า
-
ใส่แท็ก "center" หัว-ท้ายข้อความ. แท็ก center จะอยู่ในฟอร์แมต <center>text</center> โดยเปลี่ยน "text" เป็นข้อความ ถ้าข้อความคุณมี tag อยู่แล้ว (เช่น "<p></p>" ของย่อหน้าข้อความ) แท็ก "center" จะอยู่นอกแท็กเดิมที่มีได้
< center >< h1 > ยินดีต้อนรับสู่เว็บของฉัน </ h1 ></ center > < center > อ่านให้สนุกจ้า! </ center >
-
ตรวจทานโค้ด HTML. โค้ดที่ได้จะออกมาหน้าตาประมาณนี้ [4] X แหล่งข้อมูลอ้างอิง
<!DOCTYPE html> < html > < body > < h1 >< center > ยินดีต้อนรับสู่เว็บของฉัน </ center ></ h1 > < center > อ่านให้สนุกจ้า! </ center > < p1 > เว็บนี้จัดทำเพื่อการศึกษาเท่านั้น </ p1 > </ body > </ html >
โฆษณา
ข้อมูลอ้างอิง
โฆษณา
