![เทคนิคการจัดกึ่งกลางใน CSS ที่ทุกคนต้องรู้ 👨💻💯](https://i.ytimg.com/vi/N3EmMXujhMA/hqdefault.jpg)
เนื้อหา
บทความวิกิฮาวนี้จะแนะนำวิธีจัดข้อความกึ่งกลางในเว็บไซต์ HTML เราใช้ CSS (Cascading Style Sheets หรือ style sheets) สำหรับสิ่งนี้ เราเคยจัดกึ่งกลางใน HTML โดยใช้ไฟล์ ศูนย์>แต่จะใช้ไม่ได้ในเบราว์เซอร์ส่วนใหญ่อีกต่อไป
ที่จะก้าว
วิธีที่ 1 จาก 2: การใช้ CSS
เปิดไฟล์ข้อความที่คุณอธิบายสไตล์ของคุณ ตอนนี้ ศูนย์>ไม่ได้ใช้แท็กอีกต่อไปสร้างองค์ประกอบใหม่ในไฟล์นี้ซึ่งจะจัดกึ่งกลางข้อความในบางส่วนของเอกสาร HTML ของคุณ หากคุณไม่มีไฟล์ CSS แยกต่างหากโค้ดจะอยู่ที่ด้านบนของเอกสาร HTML ระหว่างแท็ก "style>" และ "/ style>"
- ในฐานะที่เป็น สไตล์>- และ / style>ยังไม่มีแท็กคุณสามารถวางไว้ใต้ ร่างกาย>แท็กด้วยวิธีต่อไปนี้:
! DOCTYPE html> html> body> style> / style>
สร้างชั้นเรียนที่เน้นข้อความ div>แท็กบอกเอกสาร HTML ของคุณว่าส่วนใดที่คลาสนี้เกี่ยวข้องกับ พิมพ์ต่อไปนี้ระหว่างแท็ก "style" อย่าลืมคลิกสองครั้ง ↵เข้า หลังจากบรรทัดแรก:
div.a {}
เพิ่มไฟล์ จัดข้อความทรัพย์สิน. ประเภท จัดข้อความ: ศูนย์; ระหว่างวงเล็บปีกกาใน div.a-มาตรา. ตอนนี้ "ส่วนหัว" มีลักษณะดังนี้:
! DOCTYPE html> html> body> style> div.a {text-align: center; } / style>
เพิ่มอันที่ถูกต้อง divแท็กไปยังข้อความที่คุณต้องการจัดกึ่งกลาง คุณทำสิ่งนี้ผ่านไฟล์ div>แท็กเหนือข้อความนี้และปิดด้วย / div>แท็กด้านล่างข้อความนี้ ตัวอย่างเช่นหากคุณต้องการจัดกึ่งกลางชื่อเรื่องและย่อหน้าด้านล่างจะมีลักษณะดังนี้:
div> h1> ยินดีต้อนรับสู่เว็บไซต์ของฉัน / h1> p> เว็บไซต์นี้มีไว้เพื่อให้ข้อมูลเกี่ยวกับสิ่งต่างๆเป็นหลัก /p> / div>
ใช้ div.aแท็กเพื่อจัดองค์ประกอบอื่น ๆ ให้อยู่กึ่งกลาง เมื่อคุณต้องการจัดองค์ประกอบอื่นให้อยู่กึ่งกลางเช่นเนื้อหาระหว่างแท็ก p> / p> และ h2> / h2>) คุณพิมพ์ div> สำหรับองค์ประกอบนี้และ / div> หลังจากนั้น เนื่องจากคุณได้กำหนด "div.a" เป็นโค้ด CSS ที่อยู่ตรงกลางแล้วตอนนี้องค์ประกอบเหล่านี้จึงถูกจัดให้อยู่กึ่งกลางด้วย
style> div.a {text-align: center; } / style> div> h2> ยินดีรับบริจาค / h2> p> please / p> / div>
ตรวจสอบเอกสารของคุณ แม้ว่าข้อความในหน้าเว็บของคุณจะแตกต่างกัน แต่ก็ควรมีลักษณะดังนี้:
! DOCTYPE html> html> body> style> div.a {text-align: center; } / style> div> h1> ยินดีต้อนรับสู่เว็บไซต์ของฉัน / h1> p> เว็บไซต์นี้มีไว้เพื่อให้ข้อมูลเกี่ยวกับสิ่งต่างๆเป็นหลัก / p> / div> div> h2> ยินดีรับบริจาค / h2> p> please / p> / div> / body> / html>
วิธีที่ 2 จาก 2: ใช้แท็ก "center" ใน HTML
- เปิดเอกสาร HTML ของคุณ วิธีนี้อธิบายถึงวิธีการล้าสมัย ศูนย์>แท็ก วิธีนี้อาจยังใช้ได้ในหลาย ๆ เบราว์เซอร์ แต่ที่ดีที่สุดคืออย่าพึ่งมันมากเกินไป
ค้นหาข้อความที่คุณต้องการจัดกึ่งกลาง เลื่อนเอกสารของคุณลงไปจนกว่าคุณจะพบชื่อเรื่องย่อหน้าหรือข้อความอื่น ๆ ที่คุณต้องการจัดกึ่งกลาง
วางแท็ก "center" ไว้ที่ด้านใดด้านหนึ่งของข้อความ โค้ดมีลักษณะดังนี้ ศูนย์> ข้อความ / ศูนย์>. ในที่นี้ "ข้อความ" คือข้อความที่จะจัดกึ่งกลาง หากมีแท็กอื่นในข้อความนี้เช่น "p> / p>" ก่อนย่อหน้าให้วางแท็ก "center" ไว้นอกแท็กที่มีอยู่
center> h1> ยินดีต้อนรับสู่เว็บไซต์ของฉัน / h1> / center> center> ทำใจให้สบาย! / center>
ตรวจสอบเอกสาร HTML ของคุณ ควรมีลักษณะดังนี้:
! DOCTYPE html> html> body> h1> center> ยินดีต้อนรับสู่เว็บไซต์ / ศูนย์ของฉัน> / h1> center> ทำให้ง่ายด้วยตัวคุณเอง! / center> p1> เว็บไซต์นี้มีไว้เพื่อให้ข้อมูลเกี่ยวกับสิ่งต่างๆเป็นหลัก / p1> / body > / html>