วิธีจัดแนวข้อความในแนวตั้งใน CSS

กล่องถูกสร้างขึ้นโดยใช้“ 3px “ ชายแดนและ” 250px ' ความสูง. “ ขนาดตัวอักษร ” คุณสมบัติใช้กับค่า “ 24px ” เพื่อให้มองเห็นแบบอักษรได้ เราจะกำหนด div a “ ความสูงของเส้น ' ของ ' 250px ” สำหรับจัดแนวข้อความในแนวตั้งตรงกลาง ต่อไปเราจะใช้ “ text-align ” คุณสมบัติเพื่อจัดข้อความให้อยู่ตรงกลาง:

อย่างที่คุณเห็น ข้อความถูกจัดแนวในแนวตั้งให้อยู่ตรงกลางโดยใช้ความสูงบรรทัด และแนวนอนกับกึ่งกลางด้วยคุณสมบัติ text-align

ทีนี้มาดูวิธีถัดไปกัน

วิธีที่ 2: การใช้คุณสมบัติการแสดงผลและการจัดตำแหน่งรายการเพื่อจัดแนวข้อความในแนวตั้งใน CSS

“ Flexbox ” เป็นเลย์เอาต์หนึ่งมิติที่ให้คุณจัดรูปแบบ HTML คุณยังสามารถใช้เพื่อจัดแนวรายการในแนวตั้งหรือแนวนอน

ลองมาดูตัวอย่างและจัดแนวข้อความในแนวตั้งด้วยความช่วยเหลือของ flexbox

ตัวอย่าง

ขั้นแรก เราจะทำให้คอนเทนเนอร์ของเรามีความยืดหยุ่นโดยการตั้งค่า ' แสดง ” คุณสมบัติเป็น “ flex ” ต่อไป ใช้ “ จัดตำแหน่งรายการ ” คุณสมบัติสำหรับตั้งค่าเนื้อหาตรงกลางแนวตั้ง นอกจากนี้ ในการจัดแนวเนื้อหาให้อยู่ตรงกลางในแนวนอน “ justify-เนื้อหา ” จะใช้คุณสมบัติ:

ข้อความที่ระบุได้รับการจัดตำแหน่งให้อยู่ตรงกลางเรียบร้อยแล้ว:

เราได้จัดเตรียมวิธีการที่เกี่ยวข้องกับการจัดแนวข้อความในแนวตั้งใน CSS

บทสรุป

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