text-align

CSS text-align 속성은 블록 요소나 표의 칸 상자의 가로 정렬을 설정합니다.vertical-align과 동일하나 세로가 아닌 가로 방향으로 동작합니다.

구문

/* 키워드 값 */
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;

/* 표 열의 문자 기반 정렬 */
text-align: ".";
text-align: "." center;

/* 블록 정렬 값 (비표준 구문) */
text-align: -moz-center;
text-align: -webkit-center;

/* 전역 값 */
text-align: inherit;
text-align: initial;
text-align: unset;

text-align 속성은 다음 방법 중 하나를 사용해 지정합니다.

start
쓰기 방식이 좌횡서면 left와 같고, 우횡서면 right과 같습니다.
end
쓰기 방식이 좌횡서면 right과 같고, 우횡서면 left와 같습니다.
left
인라인 콘텐츠를 줄 상자의 왼쪽 모서리로 정렬합니다.
인라인 콘텐츠를 줄 상자의 오른쪽 모서리로 정렬합니다.
center
인라인 콘텐츠를 줄 상자의 가운데로 정렬합니다.
justify
인라인 콘텐츠를 양쪽 정렬합니다. 마지막 줄을 제외하고, 줄 상자의 왼쪽과 오른쪽 끝에 텍스트를 맞추기 위해 사이 공간을 띄웁니다.
justify-all
justify와 같지만 마지막 줄에도 적용합니다.
match-parent
inherit과 비슷하지만, startend 값을 부모의 direction에 맞춰 적절한 leftright 값으로 치환합니다.
<string>
표 칸에 적용할 경우, 칸의 콘텐츠를 해당 문자에 맞춰 정렬합니다.

접근성 고려사항

양쪽 정렬 적용 시 생기는 불규칙한 여백은 난독증 등 인지력 저하를 겪고 있는 사용자에게 문제가 될 수 있습니다.

형식 정의

초기값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.
적용대상block containers
상속yes
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

형식 구문

start | end | left | right | center | justify | match-parent

예제

왼쪽 정렬

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;
}

결과

가운데 정렬

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;
}

결과

양쪽 정렬

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;
}

결과

참고

인라인 콘텐츠를 가운데 정렬하지 않고 자신을 정렬하는 법은 marginauto로 설정하는 것입니다.

.something {
  margin: auto;
}
.something {
  margin: 0 auto;
}
.something {
  margin-left: auto;
  margin-right: auto;
}

명세

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

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
text-alignChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
Prefixed center, left, and right values for block alignment
DeprecatedNon-standard
Chrome Full support 1
Prefixed
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 79
Prefixed
Full support 79
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 1
Prefixed
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE No support NoOpera Full support 15
Prefixed
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 1.3
Prefixed
Full support 1.3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -khtml-
WebView Android Full support 37
Prefixed
Full support 37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 18
Prefixed
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 4
Prefixed
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Opera Android Full support 14
Prefixed
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 1
Prefixed
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -khtml-
Samsung Internet Android Full support 1.0
Prefixed
Full support 1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Flow-relative values start and endChrome Full support 1Edge Full support 79Firefox Full support 1IE No support NoOpera Full support 15Safari Full support 3.1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 2Samsung Internet Android Full support 1.0
justify-allChrome 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 NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
match-parentChrome Full support 16Edge Full support 79Firefox Full support 40IE No support NoOpera Full support 15Safari No support NoWebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 40Opera Android Full support 14Safari iOS No support NoSamsung Internet Android Full support 1.0
Character-based alignment in a table column (<string> value)
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 NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
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.

같이 보기