w3.css

목록 중앙 정렬

CSS를 사용하여 목록을 가운데 정렬하는 방법을 알아보자.

HTML 목록 가운데 정렬

1단계) HTML 추가

<div>와 같이 컨테이너 요소 안에 <ul> 요소를 래핑한다.

<div class="container">
  <ul class="myUL">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
  </ul>
</div>

2단계) CSS 추가

<div> 요소를 가운데 정렬하고 <ul>의 표시를 inline-block으로 변경한다.

선택 사항으로 목록 항목을 왼쪽으로 정렬하여 더욱 깔끔하게 볼 수 있다.

div.container {
  text-align: center;
}

ul.myUL {
  display: inline-block;
  text-align: left;
}

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기