[css] ul, li 태그 중앙 정렬

문제점

ul 태그안에 li 태그를 중앙 정렬을 하는데 문제가 발생했다.

ul {
text-align: center;
}
li {
list-style: none;
}

그림과 같이 중앙 정렬이 매우 어색하다.

해답

한참을 고민하고 구글링을 한 결과 해답을 찾을 수 있었다.

ul 태그에서 margin과 padding을 0으로 설정하면 해결이 된다. h1과 같은 다른 태그 들과 마찬가지로 ul 태그가 나름의 margin과 padding을 가지고 있기 때문이다.

워낙 ul, li 태그를 써오지 않아서 익숙하지 않았기 때문이다.

ul {
    text-align: center;
    margin: 0;
    padding: 0;
  }
li {
 list-style: none;
}