มีสองวิธีในการจัดกึ่งกลางลิงก์:
ในบทความนี้ เราจะอธิบายทั้งสองวิธีเพื่อให้ลิงก์อยู่ตรงกลาง เริ่มกันเลย!
วิธีที่ 1: จัดกึ่งกลางลิงก์ใน CSS โดยใช้ text-align Property
ในการตั้งศูนย์กลางของลิงก์ใน HTML เราจะใช้ “ text-align ” คุณสมบัติของ CSS “ text-align คุณสมบัติ ” ใน CSS ใช้เพื่อปรับการจัดตำแหน่งข้อความ เช่น การจัดตำแหน่งซ้าย ขวา กึ่งกลาง และจัดชิดขอบ
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ text-align คือ:
text-align : ค่า
ในสถานที่ของ “ ค่า ” คุณสามารถตั้งค่าการจัดตำแหน่งข้อความ เช่น ซ้าย ขวา กึ่งกลาง และจัดชิดขอบ
ตอนนี้เราจะใช้ “ text-align ” เพื่อจัดตำแหน่งลิงก์ที่กำหนดให้อยู่ตรงกลาง
ตัวอย่าง
หากต้องการให้ลิงก์อยู่ตรงกลางหน้าเว็บ เราจะเพิ่มลิงก์ใน HTML ภายในแท็ก
ในการดำเนินการดังกล่าว ให้ใช้แท็ก เพื่อกำหนดไฮเปอร์ลิงก์และระบุที่อยู่ของไซต์ที่ต้องการ หลังจากนั้นให้ระบุชื่อลิงค์ ในกรณีของเรา เราได้เพิ่มลิงก์ไปยังเว็บไซต์ Linuxhint ของเราHTML
< ร่างกาย >< เอ href = “https://linuxhint.com/” > ลินุกซ์ < / เอ >
< / ร่างกาย >
รูปภาพด้านล่างระบุว่ามีการเพิ่มลิงก์ซึ่งอยู่ในตำแหน่งทางด้านซ้ายโดยค่าเริ่มต้น:
ตอนนี้ย้ายไปที่ CSS เพื่อให้ลิงก์อยู่ตรงกลาง
ในที่นี้เราจะใช้ “ เอ ” เพื่อเข้าถึงลิงก์ที่เพิ่มเข้ามา หลังจากนั้น ตั้งค่า text-align เป็น “ ศูนย์กลาง ” และแสดงเป็น “ บล็อก ” เป็นผลให้องค์ประกอบจะถูกเพิ่มเป็นองค์ประกอบบล็อกโดยเริ่มจากบรรทัดใหม่และใช้ความกว้างทั้งหมด
CSS
เอ {text-align : ศูนย์กลาง ;
แสดง : บล็อก ;
}
บันทึก: คุณสมบัติการจัดข้อความ CSS ไม่ทำงานเพียงลำพังเพื่อจัดแท็กให้อยู่ตรงกลาง ดังนั้น คุณต้องใช้ “ แสดง ” คุณสมบัติและการตั้งค่า” บล็อก ” เพื่อจัดลิงก์ให้อยู่ตรงกลาง
ตอนนี้ ย้ายไปที่ HTML และดำเนินการเพื่อดูผลลัพธ์ต่อไปนี้ ที่นี่ คุณจะเห็นว่าลิงก์อยู่ตรงกลางของหน้าเว็บ:
ไปที่วิธีที่สองเพื่อจัดแนวลิงก์ให้อยู่ตรงกลาง
วิธีที่ 2: เชื่อมโยงศูนย์กลางใน CSS โดยใช้คุณสมบัติ 'ระยะขอบ'
ใน CSS คำว่า “ ระยะขอบ ” คุณสมบัติใช้เพื่อจัดกึ่งกลางลิงก์ เป็นคุณสมบัติชวเลขของ “ ระยะขอบซ้าย ”, “ ขอบขวา ”, “ ขอบบน ', และ ' ขอบล่าง ' คุณสมบัติ. คุณสามารถตั้งค่าของคุณสมบัติที่กำหนดทั้งหมดในบรรทัดเดียว
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติมาร์จิ้นคือ:
ระยะขอบ : รถยนต์ | สูงสุด ขวา ล่าง ซ้ายคำอธิบายของไวยากรณ์ที่ให้ไว้ข้างต้นได้รับด้านล่าง:
- อัตโนมัติ: ใช้สำหรับตั้งค่าองค์ประกอบตามเบราว์เซอร์
- สูงสุด: ใช้สำหรับกำหนดระยะขอบจากด้านบน
- ขวา: ใช้สำหรับกำหนดระยะขอบจากด้านขวา
- ปุ่ม: ใช้สำหรับกำหนดระยะขอบจากด้านล่าง
- ซ้าย: ใช้สำหรับกำหนดระยะขอบจากด้านซ้าย
บันทึก: การระบุค่าสองค่าจะหมายถึงระยะขอบจากด้านบนและด้านล่าง และระยะขอบจากซ้ายและขวา อย่างไรก็ตาม หากเพิ่มค่าใดค่าหนึ่ง มาร์จิ้นจะถูกนำไปใช้กับทั้งสี่ด้าน
มาดูตัวอย่างกัน โดยเราจะจัดลิงก์ให้อยู่ตรงกลางโดยใช้ปุ่ม ' ระยะขอบ ' คุณสมบัติ.
ตัวอย่าง
ขั้นแรกให้ตั้งค่าของคุณสมบัติการแสดงผลเป็น “ บล็อก ” และความกว้างเป็น “ 70px ” หลังจากนั้นใช้คุณสมบัติมาร์จิ้นและตั้งค่าเป็น “ รถยนต์ ”:
เอ {แสดง : บล็อก ;
ความกว้าง : 70px ;
ระยะขอบ : รถยนต์ ;
}
บันทึก: “ แสดง ' และ ' ความกว้าง ” จำเป็นต้องกำหนดคุณสมบัติ; มิฉะนั้น “ ระยะขอบ ” คุณสมบัติจะไม่ทำงาน ค่าของคุณสมบัติความกว้างสามารถกำหนดได้ตามความละเอียดของหน้าจอแสดงผลและความยาวของข้อความ
คุณสามารถเห็นได้จากภาพที่กำหนดให้ลิงก์อยู่กึ่งกลางสำเร็จ:
แค่นั้นแหละ! เราอธิบายวิธีการจัดลิงก์ให้อยู่ตรงกลาง
บทสรุป
“ text-align ' และ ' ระยะขอบ ” คุณสมบัติ ใช้เพื่อจัดกึ่งกลางลิงก์โดยมีส่วนสนับสนุนของ “ แสดง ' และ ' ความกว้าง ' คุณสมบัติ. คุณสมบัติ display จำเป็นพร้อมกับคุณสมบัติ text-align ในขณะที่ใช้คุณสมบัติ margin ทั้งคุณสมบัติ display และ width จะต้องทำให้ลิงค์อยู่ตรงกลาง คู่มือนี้ได้กล่าวถึงวิธีการต่างๆ ในการจัดกึ่งกลางลิงก์ใน CSS