ดาวน์โหลดบทความดาวน์โหลดบทความX
บทความนี้ร่วมเขียนโดยเหล่าบรรณาธิการและนักวิจัยที่ผ่านการฝึกฝนมาเพื่อความถูกต้องและครอบคลุมของเนื้อหา
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้
บทความนี้ถูกเข้าชม 34,379 ครั้ง
บทความวิกิฮาวนี้จะแนะนำวิธีการ center คือจัดหน้าให้ข้อความอยู่ตรงกลางในเว็บ HTML โดยใช้ Cascading Style Sheets (CSS) ปกติคุณทำให้ข้อความอยู่กลางหน้าใน HTML ได้ด้วยแท็ก <center> แต่ตอนนี้แท็กนี้ obsolete คือตกรุ่นไปแล้วในแทบทุกเบราว์เซอร์[1]
ขั้นตอน
เปิดไฟล์ที่มี CSS styles. ถึงแท็ก <center> จะ obsolete ไปแล้ว แต่ก็สร้าง element ใหม่เพื่อเพิ่มในส่วนไหนก็ได้ของหน้า เพื่อทำให้ข้อความอยู่ตรงกลางภายในขอบเขตที่กำหนด ถ้าไม่มีไฟล์ CSS แยก ให้หา styles ด้านบนของไฟล์ HTML ระหว่างแท็ก "<style>" กับ "</style>"[2]- ถ้ายังไม่มีแท็ก <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]<!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]<!DOCTYPE html><html><body><h1><center>ยินดีต้อนรับสู่เว็บของฉัน</center></h1><center>อ่านให้สนุกจ้า!</center><p1>เว็บนี้จัดทำเพื่อการศึกษาเท่านั้น</p1></body></html>
โฆษณา
ข้อมูลอ้างอิง
เกี่ยวกับวิกิฮาวนี้
นักเขียนในทีมวิกิฮาว
บทความนี้ร่วมเขียนโดยเหล่าบรรณาธิการและนักวิจัยที่ผ่านการฝึกฝนมาเพื่อความถูกต้องและครอบคลุมของเนื้อหา
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้ บทความนี้ถูกเข้าชม 34,379 ครั้ง
ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้ บทความนี้ถูกเข้าชม 34,379 ครั้ง
หมวดหมู่: ความปลอดภัยของคอมพิวเตอร์
มีการเข้าถึงหน้านี้ 34,379 ครั้ง
บทความนี้เป็นประโยชน์กับคุณไหม
⚠️ Disclaimer:
Content from Wiki How ไท language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.
- - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
- - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
- - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
- - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.
โฆษณา
