[text] CSS - text-align 속성 ★ - 텍스트정렬 (= text-align속성 = 텍스트얼라인속성)

1. text-align 예제 - 텍스트 정렬
2. text-align 정의
3. text-align 구문
4. text-align: justify 예제 - 좌우균등배분정렬

text-align 예제 - 텍스트 정렬 

text-align 정의

 

요소 안 텍스트 정렬 방법 지정.

 

---

 

1.

요소 안 인라인요소인 이미지를 정렬시킬 때도 사용 가능하긴 하나,

되도록이면 이미지는 display:block 속성 이용해 block 요소로 만든 후 아래 방법 이용해 정렬 설정.

block 요소는 float 또는 margin 속성 이용해 정렬
왼쪽정렬 : float:left
중앙정렬 : margin:0 auto; width:OO%;
중앙정렬 : float:right

 

2.

기본값: (direction:ltr 경우 left , direction:rtl 경우 right)

상속여부: O

애니효과: X

CSS버전: CSS1

JS구문: object.style.textAlign="right"

 

3.

모든 브라우저 지원.

 

text-align 구문

 

selector {text-align: 속성값;}

 

---

[속성값]

 

left
왼쪽 정렬  

right
오른쪽 정렬

 

center

중앙 정렬

 

justify

양쪽균등배분정렬 (= 좌우균등배분정렬 = 좌우균분정렬)

※ text-justify 속성 사용 시 필수.

 

inherit

부모 요소의 속성값을 상속

 

text-align: justify 예제 - 좌우균등배분정렬

 

<style>

nav ul {
    text-align: justify;
    list-style-type: none;
    padding: 10px 20px;
}
nav li {
    margin: 0;
    display: inline-block;
    cursor: pointer;
    font: 600 16px "Helvetica Neue";
}
.justify ul:after{
    content: '';
    width: 100%;
    border-bottom: 5px dashed #00BFFF;
    display: inline-block;
}

</style>
 

<div class="justify">
  <nav>
    <ul>
      <li>Home</li>
      <li>Contact us</li>
      <li>Blog</li>
      <li>Gallery</li>
      <li>News</li>
    </ul>
  </nav>
</div>

 

결과보기