가운데 정렬이 안 돼요

코드를 작성하다보면 a태그 가운데 정렬이 안되는 경우가 생긴다.

개발자 도구를 활용해서 검사해본다.

글이 차지하는 공간이 보이는데, h1태그나 p태그는 가로길이가 화면 전체를 차지한다. 가로공간에서 가운데 정렬을 하면 화면 가운데 오게된다.

반면 a태그는 글자 크기만큼 공간을 차지한다, 그래서 가운데 정렬을 해도 그대로 있는 것 처럼 보이는 것이다.

인라인 디스플레이와 블록 디스플레이에서 내용을 다루도록한다.

 

이럴때는 a태그를 div로 감싸고 클래스를 지정해준다

<div class="menu">
  <a href='#'>Link</a>
</div>

div는 가로길이가 화면 전체를 차지하기 때문에 css로 div에 정렬을 주면 가운데 정렬이 된다.

.menu {

text-align: center;

}

 

 

 

정리

text-align 속성을 사용하면 텍스트를 왼쪽, 오른쪽, 또는 가운데로 정렬할 수 있습니다.

HTML
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<p id="p3">Hello World!</p>

CSS
#p1 {
  color: red;
  text-align: left;
}

#p2 {
  color: green;
  text-align: right;
}

#p3 {
  color: blue;
  text-align: center;
}

예제
<p> 태그나 헤더 태그들 뿐만 아니라 <div> 태그의 내용물도 정렬을 할 수 있습니다!

HTML
<div class="navigation">
  <a href="#">Menu 1</a> <a href="#">Menu 2</a> <a href="#">Menu 3</a>
</div>

CSS
.navigation {
  text-align: center;
}