이 문서는 아직 자원 봉사자들이 한국어로 번역하지 않았습니다. 참여해서 번역을 마치도록 도와 주세요!
English (US)의 문서도 읽어보세요.

The text-align CSS property specifies the horizontal alignment of an inline or table-cell box.This means it works like vertical-align but in the horizontal direction.

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:

Values

start
The same as left if direction is left-to-right and right if direction is right-to-left.
end
The same as right if direction is left-to-right and left if direction is right-to-left.
left
The inline contents are aligned to the left edge of the line box.
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 values start and end are calculated according to the parent's direction and are replaced by the appropriate left or right 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.

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 valuestart, 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 toblock containers
Inheritedyes
Mediavisual
Computed valueas 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 typediscrete
Canonical orderorder of appearance in the formal grammar of the values

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support YesSafari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes
Prefixed center, left, and right values for block alignment
DeprecatedNon-standard
Chrome Full support 1
Prefixed
Full support 1
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge ? Firefox Full support 1
Prefixed
Full support 1
Prefixed
Prefixed Requires the vendor prefix: -moz-
IE No support NoOpera ? Safari Full support 1.3
Prefixed
Full support 1.3
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Full support 1
Prefixed
Prefixed Requires the vendor prefix: -khtml-
WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Flow-relative values start and end
Experimental
Chrome Full support 1Edge No support NoFirefox Full support 1IE No support NoOpera ? Safari Full support 3.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
match-parent
Experimental
Chrome Full support 16Edge ? Firefox Full support 40IE No support NoOpera ? Safari No support NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 40Opera Android ? Safari iOS ? Samsung Internet Android ?
justify-all
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Character-based alignment in a table column (<string> value)
Experimental
Chrome No support NoEdge ? Firefox No support NoIE ? Opera ? Safari No support NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS No support NoSamsung 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.

See also