CSS text-align Property
Description
The text-align
property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box.
- Initial value
- start
- Applies to
- Block containers
- Inherited
- Yes
- Media
- Visual
- Computed value
- As specified, except for the match-parent value which is calculated against its parent's direction value and results in a computed value of either left or right
- Animatable
- No
- CSS Version
- CSS1, CSS2, CSS3
- JavaScript syntax
- object.style.textAlign
Syntax
text-align: start | end | left | right | center | justify | match-parent | start end
Values
- startInline-level content is aligned to the start edge of the line box.
- endInline-level content is aligned to the end edge of the line box.
- leftInline-level content is aligned to the left edge of the line box.
- rightInline-level content is aligned to the right edge of the line box.
- justifyThe text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.
- centerInline-level content is centered within the line box.
- match-parentSimilar to inherit with the difference that the value start and end are calculated according the parents direction and are replaced by the adequate left or right value.
- start endSpecifies start alignment of the first line and any line immediately after a forced line break; and end alignment of any remaining lines.
- inherit
Example
<div class="test"> Eat these soft French rolls and drink some tea.</div>
<div class="test2">Eat more of these soft French rolls and drink some tea. </div>
<div class="test3">Eat these soft French rolls and drink some tea.</div>
<div class="test4">Eat these soft French rolls and drink some tea. Eat these soft French rolls and drink some tea. Eat these soft French rolls and drink some tea. Eat these soft French rolls and drink some tea. Eat these soft French rolls and drink some tea.</div>
div {
background: rgba(0, 255, 0, .1);
margin-bottom: 10px;
}
.test {
text-align: left;
}
.test2 {
text-align: center;
}
.test3 {
text-align: right;
}
.test4 {
text-align: justify;
}
Give it a Try
Click the button below to experiment with this property.
Browser Support
Desktop | |||||
3 | 12 | 1 | 1 | Yes | 1 |
Tablets / Mobile | |||||
![]() |
|||||
≤37 | 18 | 4 | Yes | 1 | Yes |
Last updated by CSSPortal on: 2nd November 2019
CSS Properties
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- break-after
- break-before
- break-inside
- caption-side
- caret-color
- clear
- clip-path
- color
- column-count
- column-fill
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- counter-set
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-weight
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-gap
- grid-column-start
- grid-gap
- grid-row
- grid-row-end
- grid-row-gap
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- hanging-punctuation
- height
- hyphens
- image-orientation
- justify-content
- justify-items
- justify-self
- left
- letter-spacing
- line-break
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- max-height
- max-width
- min-height
- min-width
- mix-blend-mode
- object-fit
- object-position
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-wrap
- overflow-x
- overflow-y
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- perspective
- perspective-origin
- place-content
- place-items
- place-self
- position
- quotes
- resize
- right
- shape-image-threshold
- shape-margin
- shape-outside
- tab-size
- table-layout
- text-align
- text-align-last
- text-combine-upright
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-justify
- text-orientation
- text-overflow
- text-shadow
- text-transform
- text-underline-position
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- vertical-align
- visibility
- white-space
- widows
- width
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index