Text align in css
In this article we are going to learn about text-align property with values of left, right, center and justify in css, how to control alignment of text.
We learnt about css in general, inline css, internal css, external css, selectors css, positions in css, display in css, lists style in css, multiple css, fixed layout in css, liquid layout in css, links style in css and box shadow in css so, we will be focusing on text-align property.
Text align
Text-align is a Cascading Style Sheet property used to position or align text on left, right, center or justify in html element.
Text align left
Text align property with a value of left is used to align text on the left of html element.
Let us create a div element with left value of text-align property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.text-align-example {
text-align: left;
background: orange;
color: white;
}
<style/>
</head>
<body>
<div class="text-align-example">This is a div element with left value of text-align property applied.</div>
</body>
</html>
So, we should have the following results and the text is aligned on the left of div element.
Text align right
Text align property with a value of right is used to align text on the right of html element.
Let us create a div element with right value of text-align property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.text-align-example {
text-align: right;
background: orange;
color: white;
}
<style/>
</head>
<body>
<div class="text-align-example">This is a div element with right value of text-align property applied.</div>
</body>
</html>
So, we should have the following results and the text is aligned on the right of div element.
Text align center
Text align property with a value of center is used to align text on the center of html element.
Let us create a div element with center value of text-align property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.text-align-example {
text-align: center;
background: orange;
color: white;
}
<style/>
</head>
<body>
<div class="text-align-example">This is a div element with center value of text-align property applied.</div>
</body>
</html>
So, we should have the following results and the text is aligned on the center of a div element.
Text align justify
Text align property with a value of justify is used to force each text line to take up the full width of an html element with an exception of last text line.
Let us create a div element with justify value of text-align property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.text-align-example {
text-align: justify;
background: orange;
color: white;
}
<style/>
</head>
<body>
<div class="text-align-example">This is a div element with justify value of text-align property applied.</div>
</body>
</html>
So, we should have the following results and the text line is forced to take up full width of a div element.