목차
text-align 예제 - 텍스트 정렬
text-align 정의
text-align 구문
text-align: justify 예제 - 좌우균등배분정렬
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
양쪽균등배분정렬 (= 좌우균등배분정렬 = 좌우균분정렬)
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>
주소 복사
랜덤 이동