ข้อความกึ่งกลางใน HTML

ผู้เขียน: Tamara Smith
วันที่สร้าง: 28 มกราคม 2021
วันที่อัปเดต: 1 กรกฎาคม 2024
Anonim
เทคนิคการจัดกึ่งกลางใน CSS ที่ทุกคนต้องรู้ 👨‍💻💯
วิดีโอ: เทคนิคการจัดกึ่งกลางใน CSS ที่ทุกคนต้องรู้ 👨‍💻💯

เนื้อหา

บทความวิกิฮาวนี้จะแนะนำวิธีจัดข้อความกึ่งกลางในเว็บไซต์ HTML เราใช้ CSS (Cascading Style Sheets หรือ style sheets) สำหรับสิ่งนี้ เราเคยจัดกึ่งกลางใน HTML โดยใช้ไฟล์ ศูนย์>แต่จะใช้ไม่ได้ในเบราว์เซอร์ส่วนใหญ่อีกต่อไป

ที่จะก้าว

วิธีที่ 1 จาก 2: การใช้ CSS

  1. เปิดไฟล์ข้อความที่คุณอธิบายสไตล์ของคุณ ตอนนี้ ศูนย์>ไม่ได้ใช้แท็กอีกต่อไปสร้างองค์ประกอบใหม่ในไฟล์นี้ซึ่งจะจัดกึ่งกลางข้อความในบางส่วนของเอกสาร HTML ของคุณ หากคุณไม่มีไฟล์ CSS แยกต่างหากโค้ดจะอยู่ที่ด้านบนของเอกสาร HTML ระหว่างแท็ก "style>" และ "/ style>"
    • ในฐานะที่เป็น สไตล์>- และ / style>ยังไม่มีแท็กคุณสามารถวางไว้ใต้ ร่างกาย>แท็กด้วยวิธีต่อไปนี้:
    • ! DOCTYPE html> html> body> style> / style>

  2. สร้างชั้นเรียนที่เน้นข้อความ div>แท็กบอกเอกสาร HTML ของคุณว่าส่วนใดที่คลาสนี้เกี่ยวข้องกับ พิมพ์ต่อไปนี้ระหว่างแท็ก "style" อย่าลืมคลิกสองครั้ง ↵เข้า หลังจากบรรทัดแรก:

      div.a {}

  3. เพิ่มไฟล์ จัดข้อความทรัพย์สิน. ประเภท จัดข้อความ: ศูนย์; ระหว่างวงเล็บปีกกาใน div.a-มาตรา. ตอนนี้ "ส่วนหัว" มีลักษณะดังนี้:

      ! DOCTYPE html> html> body> style> div.a {text-align: center; } / style>

  4. เพิ่มอันที่ถูกต้อง divแท็กไปยังข้อความที่คุณต้องการจัดกึ่งกลาง คุณทำสิ่งนี้ผ่านไฟล์ div>แท็กเหนือข้อความนี้และปิดด้วย / div>แท็กด้านล่างข้อความนี้ ตัวอย่างเช่นหากคุณต้องการจัดกึ่งกลางชื่อเรื่องและย่อหน้าด้านล่างจะมีลักษณะดังนี้:

      div> h1> ยินดีต้อนรับสู่เว็บไซต์ของฉัน / h1> p> เว็บไซต์นี้มีไว้เพื่อให้ข้อมูลเกี่ยวกับสิ่งต่างๆเป็นหลัก /p> / div>

  5. ใช้ 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>

  6. ตรวจสอบเอกสารของคุณ แม้ว่าข้อความในหน้าเว็บของคุณจะแตกต่างกัน แต่ก็ควรมีลักษณะดังนี้:

      ! 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

  1. เปิดเอกสาร HTML ของคุณ วิธีนี้อธิบายถึงวิธีการล้าสมัย ศูนย์>แท็ก วิธีนี้อาจยังใช้ได้ในหลาย ๆ เบราว์เซอร์ แต่ที่ดีที่สุดคืออย่าพึ่งมันมากเกินไป
  2. ค้นหาข้อความที่คุณต้องการจัดกึ่งกลาง เลื่อนเอกสารของคุณลงไปจนกว่าคุณจะพบชื่อเรื่องย่อหน้าหรือข้อความอื่น ๆ ที่คุณต้องการจัดกึ่งกลาง
  3. วางแท็ก "center" ไว้ที่ด้านใดด้านหนึ่งของข้อความ โค้ดมีลักษณะดังนี้ ศูนย์> ข้อความ / ศูนย์>. ในที่นี้ "ข้อความ" คือข้อความที่จะจัดกึ่งกลาง หากมีแท็กอื่นในข้อความนี้เช่น "p> / p>" ก่อนย่อหน้าให้วางแท็ก "center" ไว้นอกแท็กที่มีอยู่

      center> h1> ยินดีต้อนรับสู่เว็บไซต์ของฉัน / h1> / center> center> ทำใจให้สบาย! / center>

  4. ตรวจสอบเอกสาร HTML ของคุณ ควรมีลักษณะดังนี้:

      ! DOCTYPE html> html> body> h1> center> ยินดีต้อนรับสู่เว็บไซต์ / ศูนย์ของฉัน> / h1> center> ทำให้ง่ายด้วยตัวคุณเอง! / center> p1> เว็บไซต์นี้มีไว้เพื่อให้ข้อมูลเกี่ยวกับสิ่งต่างๆเป็นหลัก / p1> / body > / html>