목록을 가운데 정렬하는 방법

CSS를 사용하여 목록을 가운데 정렬하는 방법을 배우십시오.

가운데 정렬된 목록

  • 커피
  • 차
  • 콜라

HTML 목록을 가운데 정렬하십시오

第一步 - HTML 추가:

를 추가하십시오 <ul> 요소가 컨테이너 요소 내에 포함되어 있습니다. 예를 들어, <div>：

<div class="container">
  <ul class="myUL">
    <li>커피</li>
    <li>차</li>
    <li>콜라</li>
  </ul>
</div>

第二步 - CSS 추가:

를 추가하십시오 <div> 요소를 가운데 정렬하고, <ul> 의 표시를 변경하십시오 inline-block。

또는, 여러분은 목록 항목을 왼쪽 정렬하여 더 깔끔한 뷰를 얻을 수 있습니다:

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

직접 시도해 보세요

관련 페이지

강의:CSS 정렬