ฉันจะจัดกึ่งกลางข้อความ (แนวนอนและแนวตั้ง) ภายใน div

Chan Ca Cad Kungklang Khxkhwam Naew Nxn Laea Naew Tang Phayni Div



ขณะออกแบบหน้าเว็บ นักพัฒนาสามารถเพิ่มส่วนประกอบต่างๆ รวมถึงรูปภาพ ข้อความ ตาราง และอื่นๆ นอกจากนี้ ข้อความสามารถจัดกึ่งกลางใน div โดยใช้คุณสมบัติ CSS หลายอย่าง วิธีการจัดข้อความกึ่งกลางในแนวนอนที่นิยมมากที่สุดคือการใช้ “ จัดข้อความ ' คุณลักษณะ. นอกจากนี้ คุณยังสามารถใช้ปุ่ม “ ความสูงของเส้น ' และ ' จัดแนวตั้ง แอตทริบิวต์สำหรับจัดข้อความในแนวตั้ง

โพสต์นี้จะระบุวิธีการจัดกึ่งกลางข้อความในแนวตั้งและแนวนอนภายใน div:







จะจัดกึ่งกลางข้อความในแนวนอนภายใน div ได้อย่างไร

หากต้องการจัดกึ่งกลางข้อความตามแนวนอนภายใน div ให้ตรวจสอบขั้นตอนที่กำหนด



ขั้นตอนที่ 1: สร้างคอนเทนเนอร์ div



เริ่มแรก สร้างคอนเทนเนอร์ div ด้วยความช่วยเหลือของ '

' องค์ประกอบ. จากนั้นใส่เครื่องหมาย “ รหัส ” แอตทริบิวต์ภายในแท็กเปิด div หลังจากนั้น ให้ฝังข้อความระหว่างแท็ก div:





< แผนก รหัส = 'จัดเนื้อหา' >
Linuxhint เป็นหนึ่งในเว็บไซต์ที่ดีที่สุด สำหรับ การสร้างเนื้อหา
แผนก >


เอาต์พุต


ขั้นตอนที่ 2: เข้าถึง div Container เพื่อจัดกึ่งกลางข้อความ



ตอนนี้ เข้าถึงคอนเทนเนอร์ div ด้วยความช่วยเหลือของ ' รหัส ” ชื่อแอตทริบิวต์พร้อมตัวเลือก “ # ” และใช้คุณสมบัติ CSS ต่อไปนี้:

#จัดเรียงเนื้อหา{
ความกว้าง: 80 % ;
ขอบ: 0 รถยนต์;
ช่องว่างภายใน: 20px;
พื้นหลัง: #c8edf3;
จัดข้อความ: กึ่งกลาง;
สี: rgb ( 49 , สิบห้า , 240 ) ;
}


ที่นี่:

    • ความกว้าง คุณสมบัติ ” ใช้สำหรับกำหนดขนาดความกว้างของคอนเทนเนอร์
    • ขอบ ” ระบุพื้นที่ว่างภายนอกคอนเทนเนอร์
    • การขยายความ ” กำหนดช่องว่างภายในขอบเขตขององค์ประกอบ
    • พื้นหลัง ” กำหนดสีพื้นหลังที่ด้านหลังขององค์ประกอบ
    • จัดข้อความ คุณสมบัติ ” ใช้สำหรับกำหนดการจัดตำแหน่งของข้อความเป็น “ ศูนย์ '.
    • สี ” ระบุสีสำหรับข้อความภายในขอบเขต

สังเกตได้ว่าเราจัดกึ่งกลางข้อความในแนวนอนได้สำเร็จภายใน div ที่สร้างขึ้น:

จะจัดกึ่งกลางข้อความในแนวตั้งภายใน div ได้อย่างไร

หากต้องการจัดกึ่งกลางข้อความในแนวตั้งภายในคอนเทนเนอร์ div ให้ทำตามคำแนะนำที่ให้ไว้

ขั้นตอนที่ 1: เข้าถึง div Container

ก่อนอื่น เข้าไปที่ div container ที่สร้างขึ้น

ขั้นตอนที่ 2: ใช้คุณสมบัติ CSS กับข้อความกึ่งกลางในแนวตั้ง

จากนั้นใช้คุณสมบัติ CSS ที่แสดงด้านล่างเพื่อจัดกึ่งกลางข้อความในแนวตั้งใน div:

#จัดเรียงเนื้อหา{
จอแสดงผล: ตารางเซลล์;
ความกว้าง: 300px;
ความสูง: 150px;
ช่องว่างภายใน: 10px;
สี: สีฟ้า;
สีพื้นหลัง: rgb ( 248 , 215 , 166 ) ;
เส้นขอบ: 3px ประ #f09d03;
จัดแนวตั้ง: กลาง;
}


ตามข้อมูลโค้ดด้านบน:

    • ตั้ง ' แสดง ” ที่ระบุพฤติกรรมการแสดงผลขององค์ประกอบเป็น “ ตารางเซลล์ ” ซึ่งหมายความว่าทำหน้าที่เหมือนเซลล์ของตารางในองค์ประกอบ div
    • ความกว้าง ” คุณสมบัติระบุขนาดความกว้างขององค์ประกอบ
    • ความสูง ” กำหนดความสูงขององค์ประกอบ
    • การขยายความ ” กำหนดพื้นที่ว่างภายในองค์ประกอบ
    • สี ” ใช้สำหรับกำหนดสีของข้อความภายในองค์ประกอบ
    • สีพื้นหลัง ” ระบุสีของส่วนหลังขององค์ประกอบ
    • ชายแดน ” คุณสมบัติกำหนดขอบเขตขององค์ประกอบ
    • จัดแนวตั้ง คุณสมบัติ ” ใช้สำหรับตั้งค่าการจัดตำแหน่งแนวตั้งขององค์ประกอบที่กำหนดใน “ กลาง '.

เอาต์พุต


คุณได้เรียนรู้เกี่ยวกับขั้นตอนทั้งหมดเพื่อจัดกึ่งกลางข้อความภายในคอนเทนเนอร์ในแนวตั้งและแนวนอนทั้งสองแบบ

บทสรุป

หากต้องการจัดกึ่งกลางข้อความในแนวตั้งและแนวนอนภายใน div ก่อนอื่นให้สร้างคอนเทนเนอร์ div ด้วยความช่วยเหลือขององค์ประกอบ

และเข้าถึงโดยใช้ตัวเลือก จากนั้นใช้คุณสมบัติ CSS โดยที่ “ จัดข้อความ คุณสมบัติ ” ใช้สำหรับการจัดตำแหน่งแนวนอนและ “ จัดแนวตั้ง ” กำหนดการจัดตำแหน่งแนวตั้ง โพสต์นี้แสดงวิธีการจัดกึ่งกลางข้อความในแนวตั้งและแนวนอนภายใน div