이 문서는 아직 자원 봉사자들이 한국어로 번역하지 않았습니다. 참여해서 번역을 마치도록 도와 주세요!
English (US)의 문서도 읽어보세요.
The text-align
CSS property sets the horizontal alignment of a block element or table-cell box. This means it works like vertical-align
but in the horizontal direction.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
/* Keyword values */ text-align: left; text-align: right; text-align: center; text-align: justify; text-align: justify-all; text-align: start; text-align: end; text-align: match-parent; /* Character-based alignment in a table column */ text-align: "."; text-align: "." center; /* Block alignment values (Non-standard syntax) */ text-align: -moz-center; text-align: -webkit-center; /* Global values */ text-align: inherit; text-align: initial; text-align: unset;
The text-align
property is specified in one of the following ways:
- Using the keyword values
start
,end
,left
,right
,center
,justify
,justify-all
, ormatch-parent
. - Using a
<string>
value only, in which case the other value defaults toright
. - Using both a keyword value and a
<string>
value.
Values
start
- The same as
left
if direction is left-to-right andright
if direction is right-to-left. end
- The same as
right
if direction is left-to-right andleft
if direction is right-to-left. left
- The inline contents are aligned to the left edge of the line box.
right
- The inline contents are aligned to the right edge of the line box.
center
- The inline contents are centered within the line box.
justify
- The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.
justify-all
- Same as
justify
, but also forces the last line to be justified. match-parent
- Similar to
inherit
, but the valuesstart
andend
are calculated according to the parent'sdirection
and are replaced by the appropriateleft
orright
value. <string>
- When applied to a table cell, specifies the alignment character around which the cell's contents will align.
Formal syntax
start | end | left | right | center | justify | match-parent
Examples
Left alignment
HTML
<p class="example"> Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula. </p>
CSS
.example { text-align: left; border: solid; }
Result
Centered text
HTML
<p class="example"> Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula. </p>
CSS
.example { text-align: center; border: solid; }
Result
Justify
HTML
<p class="example"> Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula. </p>
CSS
.example { text-align: justify; border: solid; }
Result
Notes
The standard-compatible way to center a block itself without centering its inline content is setting the left and right margin
to auto
, e.g.:
.something { margin: auto; }
.something { margin: 0 auto; }
.something { margin-left: auto; margin-right: auto; }
Accessibility concerns
The inconsistent spacing between words created by justified text can be problematic for people with cognitive concerns such as Dyslexia.
- MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0
Specifications
Specification | Status | Comment |
---|---|---|
CSS Logical Properties and Values Level 1 The definition of 'text-align' in that specification. |
Editor's Draft | No changes |
CSS Text Module Level 4 The definition of 'text-align' in that specification. |
Editor's Draft | Added the <string> value. |
CSS Text Module Level 3 The definition of 'text-align' in that specification. |
Working Draft | Added the start , end , and match-parent values. Changed the unnamed initial value to start (which it was). |
CSS Level 2 (Revision 1) The definition of 'text-align' in that specification. |
Recommendation | No changes |
CSS Level 1 The definition of 'text-align' in that specification. |
Recommendation | Initial definition |
Initial value | start , or a nameless value that acts as left if direction is ltr , right if direction is rtl if start is not supported by the browser. |
---|---|
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 |
Animation type | discrete |
Canonical order | order of appearance in the formal grammar of the values |
Browser compatibility
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 3 | Opera Full support Yes | Safari Full support 1 | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support 4 | Opera Android Full support Yes | Safari iOS ? | Samsung Internet Android Full support Yes |
Prefixed center , left , and right values for block alignment | Chrome
Full support
1
| Edge ? | Firefox
Full support
1
| IE No support No | Opera ? | Safari
Full support
1.3
| WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Flow-relative values start and end | Chrome Full support 1 | Edge No support No | Firefox Full support 1 | IE No support No | Opera ? | Safari Full support 3.1 | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android Full support 4 | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
match-parent | Chrome Full support 16 | Edge ? | Firefox Full support 40 | IE No support No | Opera ? | Safari No support No | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android Full support 40 | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
justify-all | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Edge Mobile No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Character-based alignment in a table column (<string> value) | Chrome No support No | Edge ? | Firefox No support No | IE ? | Opera ? | Safari No support No | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS No support No | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- Deprecated. Not for use in new websites.
- Deprecated. Not for use in new websites.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.