HTML_CSS_007_TAG_text-align

정렬

• 변경하고 싶은 태그의 상위태그에 적용을 시킨다.

text-align

• 대상 엘리먼트의 글자와 자식 inline 요소만 정렬한다
• 대상 엘리먼트가 아니라 그것의 텍스트만을 정렬한다

<div>
  <a href="http://www.naver.com" target="_blank">네이버로 이동</a>
</div>

<section>
  <a href="http://www.google.com" target="_blank">구글로 이동</a>
  <a href="http://www.google.com" target="_blank">구글로 이동</a>
  <article></article>
</section>

<nav>
  <a href="http://www.daum.net" target="_blank">다음으로 이동</a>
</nav>

div, section, nav {
  border:10px dotted red;
  margin:50px;
  padding:20px;
}

section {
/* section 태그 안에 있는 a만 텍스트 속성을 가지고 있으므로 
블록 속성인 article은 정렬되지 않는다.*/
  text-align:center;
}

nav {
  text-align:right;
}

a {
  background-color:gold;
}

section article {
  width:200px;
  height:200px;
  background-color:blue;
}