- CSS text-align Property
- Browser Support
- CSS Syntax
- Property Values
- More Examples
- Example
- Related Pages
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- CSS Text Alignment
- Text Alignment
- Example
- Example
- Text Align Last
- Example
- Text Direction
- Example
- Vertical Alignment
- Example
- The CSS Text Alignment/Direction Properties
- CSS Layout — Horizontal & Vertical Align
- Example
- Center Align Text
- Example
- Center an Image
- Example
- Left and Right Align — Using position
- Example
- Left and Right Align — Using float
- Example
- The clearfix Hack
- Without Clearfix
- With Clearfix
- Example
- Center Vertically — Using padding
- Example
- Example
- Center Vertically — Using line-height
- Example
- Center Vertically — Using position & transform
- Example
- Center Vertically — Using Flexbox
- Example
- How To Align Things In CSS
- Aligning Text And Inline Elements
- Why Is There No justify-self In Flexbox?
CSS text-align Property
The text-align property specifies the horizontal alignment of text in an element.
Default value: | left if direction is ltr, and right if direction is rtl |
---|---|
Inherited: | yes |
Animatable: | no. Read about animatable |
Version: | CSS1 |
JavaScript syntax: | object.style.textAlign=»right» Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
CSS Syntax
Property Values
Value | Description | Demo |
---|---|---|
left | Aligns the text to the left | Demo ❯ |
right | Aligns the text to the right | Demo ❯ |
center | Centers the text | Demo ❯ |
justify | Stretches the lines so that each line has equal width (like in newspapers and magazines) | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Another text-align example:
Related Pages
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
CSS Text Alignment
In this chapter you will learn about the following properties:
- text-align
- text-align-last
- direction
- unicode-bidi
- vertical-align
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.
The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left):
Example
When the text-align property is set to «justify», each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers):
Example
Text Align Last
The text-align-last property specifies how to align the last line of a text.
Example
Align the last line of text in three
elements:
Text Direction
The direction and unicode-bidi properties can be used to change the text direction of an element:
Example
Vertical Alignment
The vertical-align property sets the vertical alignment of an element.
Example
Set the vertical alignment of an image in a text:
img.a <
vertical-align: baseline;
>
img.b vertical-align: text-top;
>
img.c vertical-align: text-bottom;
>
The CSS Text Alignment/Direction Properties
Property | Description |
---|---|
direction | Specifies the text direction/writing direction |
text-align | Specifies the horizontal alignment of text |
text-align-last | Specifies how to align the last line of a text |
unicode-bidi | Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document |
vertical-align | Sets the vertical alignment of an element |
CSS Layout — Horizontal & Vertical Align
Setting the width of the element will prevent it from stretching out to the edges of its container.
The element will then take up the specified width, and the remaining space will be split equally between the two margins:
This div element is centered.
Example
Note: Center aligning has no effect if the width property is not set (or set to 100%).
Center Align Text
To just center the text inside an element, use text-align: center;
Example
Tip: For more examples on how to align text, see the CSS Text chapter.
Center an Image
To center an image, set left and right margin to auto and make it into a block element:
Example
Left and Right Align — Using position
One method for aligning elements is to use position: absolute; :
In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.
Example
Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.
Left and Right Align — Using float
Another method for aligning elements is to use the float property:
Example
The clearfix Hack
Note: If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. You can use the «clearfix hack» to fix this (see example below).
Without Clearfix
With Clearfix
Then we can add the clearfix hack to the containing element to fix this problem:
Example
Center Vertically — Using padding
There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding :
Example
To center both vertically and horizontally, use padding and text-align: center :
I am vertically and horizontally centered.
Example
Center Vertically — Using line-height
Another trick is to use the line-height property with a value that is equal to the height property:
I am vertically and horizontally centered.
Example
.center <
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
>
/* If the text has multiple lines, add the following: */
.center p line-height: 1.5;
display: inline-block;
vertical-align: middle;
>
Center Vertically — Using position & transform
If padding and line-height are not options, another solution is to use positioning and the transform property:
I am vertically and horizontally centered.
Example
.center <
height: 200px;
position: relative;
border: 3px solid green;
>
.center p margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
>
Tip: You will learn more about the transform property in our 2D Transforms Chapter.
Center Vertically — Using Flexbox
You can also use flexbox to center things. Just note that flexbox is not supported in IE10 and earlier versions:
Example
.center <
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
>
Tip: You will learn more about Flexbox in our CSS Flexbox Chapter.
How To Align Things In CSS
There are a few ways to align elements in CSS. In this article, Rachel Andrew explains what they are with some tips to help you remember which to use and why.
We have a whole selection of ways to align things in CSS today, and it isn’t always an obvious decision which to use. However, knowing what is available means that you can always try a few tactics if you come across a particular alignment problem.
In this article, I will take a look at the different alignment methods. Instead of providing a comprehensive guide to each, I’ll explain a few of the sticking points people have and point to more complete references for the properties and values. As with much of CSS, you can go a long way by understanding the fundamental things about how the methods behave, and then need a place to go look up the finer details in terms of how you achieve the precise layout that you want.
Aligning Text And Inline Elements
When we have some text and other inline elements on a page, each line of content is treated as a line box. The property text-align will align that content on the page, for example, if you want your text centered, or justified. Sometimes, however, you may want to align things inside that line box against other things, for example, if you have an icon displayed alongside text, or text of different sizes.
Meet Smashing Workshops on front-end & UX, with practical takeaways, live sessions, video recordings and a friendly Q&A. On design systems, UX, web performance and CSS/JS. With Brad Frost, Christine Vallaure and so many others.
In the example below, I have some text with a larger inline image. I am using vertical-align: middle on the image to align the text to the middle of the image.
In grid, I can use all four properties to move the items around inside their grid area. Once again, the Firefox DevTools Grid Inspector will be useful when playing with alignment. With the grid lines overlaid, you can see the area inside which the content is being moved:
Play around with the values in the CodePen demo to see how you can shift content around in each layout method:
If I change flex-direction to space-between , that extra space is now distributed between the items:
If I now add more content to my items so they become larger and there is no longer any additional space, then justify-content does nothing — simply because there is no space to distribute.
A common question I’m asked is why justify-content isn’t working when flex-direction is column . This is generally because there is no space to distribute. If you take the above example and make it flex-direction: column , the items will display as a column, but there will be no additional space below the items as there is when you do flex-direction: row . This is because when you make a Flex Container with display: flex you have a block level flex container; this will take up all possible space in the inline direction. In CSS, things do not stretch in the block direction, so no extra space.
Add a height to the container and — as long as that is more than is required to display the items — you have extra space and therefore justify-content will work on your column.
Why Is There No justify-self In Flexbox?
Grid Layout implements all of the properties for both axes because we always have two axes to deal with in Grid Layout. We create tracks (which may leave additional space in the grid container in either dimension,) and so we can distribute that space with align-content or justify-content . We also have Grid Areas, and the element in that area may not take up the full space of the area, so we can use align-self or justify-self to move the content around the area (or align-items , justify-items to change the alignment of all items).
Flexbox does not have tracks in the way that Grid layout does. On the main axis, all we have to play with is the distribution of space between the items. There is no concept of a track into which a flex item is placed. So there is no area created in which to move the item around in. This is why there is no justify-self property on the main axes in Flexbox.
Sometimes, however, you do want to be able to align one item or part of the group of items in a different way. A common pattern would be a split navigation bar with one item being separated out from the group. In that situation, the specification advises the use of auto margins.
An auto margin will take up all of the space in the direction it is applied, which is why we can center a block (such as our main page layout) using a left and right margin of auto. With an auto margin on both sides, each margin tries to take up all the space and so pushes the block into the middle. With our row of flex items, we can add margin-left: auto to the item we want the split to happen on, and as long as there is available space in the flex container, you get a split. This plays nicely with Flexbox because as soon as there is no available space, the items behave as regular flex items do.