목차
- 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>
