• Q&A
  • 회원가입
  • 로그인

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

text-align 예제

 
<style>
div {text-align: center; width:500px; color:black; border:1px solid red; padding-top:20px;}
.left {text-align: left; color:red; border:1px solid red;}
.right {text-align: right; color:blue; border:1px solid blue;}
.center {text-align: center; color:green; border:1px solid green;}
.justify {text-align: justify; color:magenta; border:1px solid magenta;}
.inherit {text-align: inherit; color:black; border:1px solid black;}
</style> 
 
<div>부모 요소 홈짱닷컴 (homzzang.com)
    <p class="left">left 홈짱닷컴 (homzzang.com)</p>
    <p class="right">right 홈짱닷컴 (homzzang.com)</p>
    <p class="center">center 홈짱닷컴 (homzzang.com)</p>
    <p class="justify">justify 홈짱닷컴 (homzzang.com)</p>
    <p class="inherit">inherit 홈짱닷컴 (homzzang.com)</p>
</div>

 

 

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>
 


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012