menu
text-align is the CSS property that sets the horizontal alignment of text inside a parent container element.
taught by Tina May
You can set your text content to align to the left, right or center:
text-align:
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
You can set your text content alignment to justify - spreading each word evenly to fill the entire width of the container:
text-align:
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
You can apply text-align to a parent container and all of its child elements will automatically inherit its value. That way you don’t have to apply the property to each child individually.
text-align:
Tip: If you want to center anchor links and other inline text elements, apply the text-align to the parent container instead.
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
You can apply text-align to a specific element by using a class or an ID selector to target that element.
text-align:
Tuition is valuable, but you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.
<div>
<h2>Oh hey guys!</h2>
<p>What's brewing, good looking?</p>
<div class="link-section"><a href="#"> This is an inactive link </a>
</div>
</div>/* Change the text alignment of the heading*/
h2 { text-align: center; }
/* Change the text alignment of the paragraph*/
p { text-align: left; }
/* You can try setting the text alignment of the link directly, but this won't move it on the page*/
a { text-align: left; }
/* Try setting the text alignment of the parent container of the link (this will change the link as well)*/
.link-section { text-align: left; }
Try changing the text alignment of our heading, paragraph and anchor link below either to the left, right, center or make it as justify.
Try these:
Copyright 2023