How to Vertically Align Text Within a Div in CSS? Last Updated : 14 Nov, 2024 Comments Improve Suggest changes Like Article Like Report Aligning text vertically within a div can enhance the visual appeal of your web design. There are various approaches to achieving vertical alignment using CSS.1. Using line-height PropertyThe line-height property is the easiest and most commonly used approach to align text within a div vertically. The line-height property sets the height of a line box, which is the area that contains the text. By setting the line height equal to the height of the container, we can center the text vertically.Syntaxdiv { height: 200px; line-height: 200px;} HTML <!DOCTYPE html> <html lang="en"> <head> <style> div { height: 200px; font-size: 30px; line-height: 200px; border: 2px dashed black; } </style> </head> <body> <div>Code World</div> </body> </html> OutputVertically Align text2. Using vertical-align PropertyThe vertical-align property in CSS can be used to specify the vertical alignment of the table box or inline element. With the help of this property, you may change the vertical alignment of the table cell or inline element and change the position of the text within it.Syntax.container { display: table-cell; vertical-align: middle;} HTML <!DOCTYPE html> <html> <head> <style> .container { display: table-cell; width: 600px; height: 400px; border: 2px dashed black; vertical-align: middle; } </style> </head> <body> <div class="container">Code World</div> </body> </html> OutputVertically Align text3. Using padding PropertyThis method involves using the padding property to provide equal padding on the top and bottom of the parent element, which effectively centers the text vertically.Syntax.container { padding: 20% 0;} HTML <!DOCTYPE html> <html> <head> <style> .container { padding: 20% 0; border: 2px dashed black; } </style> </head> <body> <div class="container"> <p> Code World </p> </div> </body> </html> OutputVertically Align text Comment More infoAdvertise with us Next Article How to Vertically Align Text Within a Div in CSS? D divyanshu1072be21 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Vertically Center Text with CSS? Here are three different ways to Vertically center text in CSS. Vertically center text means aligning text to appear in the middle of its container element.1. Using display PropertyWe can use display: flex to make the container as a flexbox and then applying the align-items: center to vertically cen 2 min read How to Vertically Align an Image Inside a Div in CSS ? In this article, we are going to see how we can vertically align an image inside a div. Centering content both vertically and horizontally is one of the most important functions which needs to be done.Below are the approaches to vertically align an image inside a div in CSS:  Table of ContentUsing C 4 min read How to align objects vertically when working with grids in CSS ? CSS grid layout is one of the strongest layout of CSS. The grid layout is 2-D which means it can handle both rows and columns, unlike flexbox which is 1-D. To align objects apply CSS to the parent element which becomes the grid container and the element's child which becomes the items in the grid. A 2 min read How to vertically align text inside a flexbox using CSS? Vertically aligning text inside a flexbox involves positioning the text centrally within the vertical space of a flex container. This can be achieved using CSS properties such as align-items and justify-content to control the vertical alignment and centering of the text. Here we have some common app 2 min read How to Center Text in a Div Vertically and Horizontally? Centering text inside a <div> both vertically and horizontally is a common requirement. This can be done using various CSS techniques. Here, we’ll explore different approaches: using Flexbox, CSS Grid, Text Align, and the Transform property.Below are the approaches to center the text verticall 4 min read How to align div vertical across full screen in Tailwind CSS ? You can easily align div vertical across the full screen using flex property in Tailwind CSS. Tailwind uses justify-center and items-center property which is an alternative to the flex-property in CSS.Syntax:<div class="flex h-screen justify-center items-center"> . . . </div>flex propert 2 min read How to Left & Right Align Text within a Div in Bootstrap ? Bootstrap is used to customize the appearance and layout of web applications. To left and right align text within a <div> in Bootstrap, we can use utility classes such as text-start and text-end, combined with the grid system for responsive design. Below are the approaches to let and right ali 2 min read How to Vertically Align Text Next to an Image using CSS ? Adding images into our websites is a common practice, and there are situations where text must be vertically aligned alongside an image. For example, a user’s name should appear immediately next to their profile picture, vertically aligned for optimal readability . In this article, we will see how t 2 min read How to set vertical alignment in Bootstrap ? Setting vertical alignment in Bootstrap refers to the process of positioning elements along the vertical axis within a layout or container. This ensures consistent and visually appealing alignment of content, such as text, images, or buttons, relative to each other or to the container's boundaries. 2 min read How to make div with left aligned text and right aligned icon using CSS ? Creating a div with left-aligned text and a right-aligned icon in CSS involves arranging elements within a container so that the text is positioned on the left side while the icon is placed on the right. This layout is commonly used for navigation bars, buttons, and list items, enhancing both functi 2 min read Like