CSS 강좌 | Property > text-align

Category

개요

text-align으로 요소(element) 안의 내용의 가로 정렬을 정합니다.

  • 기본값 : direction이 ltr일 때 left, direction이 rtl일 때 right
  • 상속 : Yes
  • 애니메이션 : No
  • 버전 : CSS Level 1

문법

text-align: left | center | right | justify | initial | inherit
  • left : 왼쪽 정렬합니다.
  • center : 가운데 정렬합니다.
  • right : 오른쪽 정렬합니다.
  • justify : 양쪽 맞춤 정렬합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      p.jbLeft {text-align: left;}
      p.jbCenter {text-align: center;}
      p.jbRight {text-align: right;}
      p.jbJustify {text-align: justify;}
    </style>
  </head>
  <body>
    <h1>text-align: left;</h1>
    <p class="jbLeft">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
    <h1>text-align: center;</h1>
    <p class="jbCenter">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
    <h1>text-align: right;</h1>
    <p class="jbRight">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
    <h1>text-align: justify;</h1>
    <p class="jbJustify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
  </body>
</html>

브라우저 지원

  • Chrome : 1.0+
  • Firefox : 1.0+
  • Internet Explorer : 3.0+
  • Opera : 3.5+
  • Safari : 1.0+

Created on 2017-04-23 12:17 | Updated on 2017-04-23 12:17