ขณะออกแบบหน้าเว็บ นักพัฒนาสามารถเพิ่มส่วนประกอบต่างๆ รวมถึงรูปภาพ ข้อความ ตาราง และอื่นๆ นอกจากนี้ ข้อความสามารถจัดกึ่งกลางใน div โดยใช้คุณสมบัติ CSS หลายอย่าง วิธีการจัดข้อความกึ่งกลางในแนวนอนที่นิยมมากที่สุดคือการใช้ “ จัดข้อความ ' คุณลักษณะ. นอกจากนี้ คุณยังสามารถใช้ปุ่ม “ ความสูงของเส้น ' และ ' จัดแนวตั้ง แอตทริบิวต์สำหรับจัดข้อความในแนวตั้ง
โพสต์นี้จะระบุวิธีการจัดกึ่งกลางข้อความในแนวตั้งและแนวนอนภายใน div:
จะจัดกึ่งกลางข้อความในแนวนอนภายใน div ได้อย่างไร
หากต้องการจัดกึ่งกลางข้อความตามแนวนอนภายใน div ให้ตรวจสอบขั้นตอนที่กำหนด
ขั้นตอนที่ 1: สร้างคอนเทนเนอร์ div
เริ่มแรก สร้างคอนเทนเนอร์ div ด้วยความช่วยเหลือของ ' ตอนนี้ เข้าถึงคอนเทนเนอร์ div ด้วยความช่วยเหลือของ ' รหัส ” ชื่อแอตทริบิวต์พร้อมตัวเลือก “ # ” และใช้คุณสมบัติ CSS ต่อไปนี้: สังเกตได้ว่าเราจัดกึ่งกลางข้อความในแนวนอนได้สำเร็จภายใน div ที่สร้างขึ้น: หากต้องการจัดกึ่งกลางข้อความในแนวตั้งภายในคอนเทนเนอร์ div ให้ทำตามคำแนะนำที่ให้ไว้ ขั้นตอนที่ 1: เข้าถึง div Container ก่อนอื่น เข้าไปที่ div container ที่สร้างขึ้น ขั้นตอนที่ 2: ใช้คุณสมบัติ CSS กับข้อความกึ่งกลางในแนวตั้ง จากนั้นใช้คุณสมบัติ CSS ที่แสดงด้านล่างเพื่อจัดกึ่งกลางข้อความในแนวตั้งใน div: เอาต์พุต หากต้องการจัดกึ่งกลางข้อความในแนวตั้งและแนวนอนภายใน div ก่อนอื่นให้สร้างคอนเทนเนอร์ div ด้วยความช่วยเหลือขององค์ประกอบ
< แผนก รหัส = 'จัดเนื้อหา' >
Linuxhint เป็นหนึ่งในเว็บไซต์ที่ดีที่สุด สำหรับ การสร้างเนื้อหา
แผนก >
เอาต์พุต
ขั้นตอนที่ 2: เข้าถึง div Container เพื่อจัดกึ่งกลางข้อความ
ความกว้าง: 80 % ;
ขอบ: 0 รถยนต์;
ช่องว่างภายใน: 20px;
พื้นหลัง: #c8edf3;
จัดข้อความ: กึ่งกลาง;
สี: rgb ( 49 , สิบห้า , 240 ) ;
}
ที่นี่:
จะจัดกึ่งกลางข้อความในแนวตั้งภายใน div ได้อย่างไร
จอแสดงผล: ตารางเซลล์;
ความกว้าง: 300px;
ความสูง: 150px;
ช่องว่างภายใน: 10px;
สี: สีฟ้า;
สีพื้นหลัง: rgb ( 248 , 215 , 166 ) ;
เส้นขอบ: 3px ประ #f09d03;
จัดแนวตั้ง: กลาง;
}
ตามข้อมูลโค้ดด้านบน:
คุณได้เรียนรู้เกี่ยวกับขั้นตอนทั้งหมดเพื่อจัดกึ่งกลางข้อความภายในคอนเทนเนอร์ในแนวตั้งและแนวนอนทั้งสองแบบ บทสรุป