The text-align property in CSS is used to set the horizontal alignment of text within a block-level element, such as a paragraph, a heading, or a div. This property is essential for controlling how text is positioned within its containing element.
Syntax
selector { text-align: value; }
Following are the possible values for text-align property.
1. left: Aligns the text to the left. This is the default alignment in left-to-right (LTR) languages like English.
2. right: Aligns the text to the right. Commonly used in right-to-left (RTL) languages like Arabic or Hebrew.
3. center: Centers the text horizontally within its container.
4. justify: Stretches the lines of text so that each line has equal width, making both the left and right edges of the text flush with the container edges. The last line is aligned left by default.
textAlign.html
<!-- html/index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text Align Example</title> <style> .left-align p { text-align: left; } .right-align p { text-align: right; } .center-align p { text-align: center; } .justify-align p { text-align: justify; } p { font-size: 1.5em; } h1{ color: darkblue; } </style> </head> <body> <div class="left-align"> <h1>Left Aligned</h1> <p>CSS properties are the attributes used to control the presentation of elements on a webpage. Each property affects specific aspects of an element's appearance. Here’s a detailed look at some common CSS properties with examples.</p> </div> <div class="right-align"> <h1>Right Aligned</h1> <p>CSS properties are the attributes used to control the presentation of elements on a webpage. Each property affects specific aspects of an element's appearance. Here’s a detailed look at some common CSS properties with examples.</p> </div> <div class="center-align"> <h1>Center Aligned</h1> <p>CSS properties are the attributes used to control the presentation of elements on a webpage. Each property affects specific aspects of an element's appearance. Here’s a detailed look at some common CSS properties with examples.</p> </div> <div class="justify-align"> <h1>Justified</h1> <p>CSS properties are the attributes used to control the presentation of elements on a webpage. Each property affects specific aspects of an element's appearance. Here’s a detailed look at some common CSS properties with examples.</p> </div> </body> </html>
No comments:
Post a Comment