CSS / ul, ol 가운데 정렬하는 방법

목록의 내용만 가운데 정렬하기

목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다.

ul {
  text-align: center;
}

목록 요소 자체를 가운데 정렬하기

목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. ul, ol의 기본 가로 크기는 100%이므로, 가로 크기를 지정해줘야 가운데로 정렬됩니다.

ul {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.

ul {
  display: table;
  margin-left: auto;
  margin-right: auto;
}

목록 요소 자체가 가운데에 위치하는 것으로, 문단 정렬은 변하지 않습니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        font-family: Consolas;
      }
      h1 {
        font-size: 16px;
      }
      ul {
        border: 1px solid #bcbcbc;
      }
      ul.a {
        text-align: center;
      }
      ul.b {
        width: 300px;
        margin-left: auto;
        margin-right: auto;
      }
      ul.c {
        display: table;
        margin-left: auto;
        margin-right: auto;
      }
    </style>
  </head>
  <body>
    <h1><code>text-align: center</code></h1>
    <ul class="a">
      <li>Lorem Ipsum</li>
      <li>Dolor Amet</li>
    </ul>
    <h1><code>width: 300px; margin-left: auto; margin-right: auto;</code></h1>
    <ul class="b">
      <li>Lorem Ipsum</li>
      <li>Dolor Amet</li>
    </ul>
    <h1><code>display: table; margin-left: auto; margin-right: auto;</code></h1>
    <ul class="c">
      <li>Lorem Ipsum</li>
      <li>Dolor Amet</li>
    </ul>
  </body>
</html>

같은 카테고리의 다른 글
CSS / 메모

CSS / 메모

크롬에서 input에 생기는 파란색 테두리 없애는 방법 input에 무언가를 입력하려고 커서를 위치시키면 다음처럼 테두리가 생깁니다. :focus 선택자를 이용해서 없앨 수 있습니다. input:focus { outline: none; } iOS에서 input에 생기는 그림자와 둥근 테두리 없애는 방법 iOS에서는 input이 둥근 테두리로 나오고 그림자 효과가 있습니다. 이를 없애는 방법은 다음과 같이 스타일링하는 것입니다. input { -webkit-appearance: none; border-radius: 0px; ​} 가변폭 ...

CSS / 표(table) 꾸미기 / 틀 고정(행 또는 열 고정) 만들기

CSS / 표(table) 꾸미기 / 틀 고정(행 또는 열 고정) 만들기

엑셀에 틀 고정이라는 기능이 있다. 틀 고정을 사용하면 상하 또는 좌우로 스크롤해도 항상 보이는 행 또는 열을 만들 수 있다. CSS로도 같은 효과를 낼 수 있다. 이를 구현하기 위해 사용하는 속성은 display: sticky이다. 예를 들어 다음과 같은 표가 있다고 하자. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / 마우스 오버 효과 / 서서히 길어지는 선 그리기

CSS / 마우스 오버 효과 / 서서히 길어지는 선 그리기

마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 위쪽 가로 방향으로 선 그리기 다음과 같이 사각형을 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / border / 테두리 만드는 속성

CSS / border / 테두리 만드는 속성

개요 border는 테두리를 만드는 속성입니다. 위, 오른쪽, 아래, 왼쪽 선을 한 번에 정합니다. 기본값 : medium, none, color 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 border: border-width border-style border-color | initial | inherit border-width : 선의 두께를 정합니다. 기본값은 medium입니다. border-style : 선의 모양을 정합니다. 기본값은 none입니다. border-color : 선의 색을 정합니다. 기본값은 꾸미려는 요소의 ...

CSS / 기초 / !important

CSS / 기초 / !important

CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용된다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙인다. property: value !important; 예를 들어 다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만든다. p { color: red; } p { color: blue; } 하지만 다음은 red에 !important가 있으므로 문단의 ...

CSS / 애니메이션 / animation

CSS / 애니메이션 / animation

CSS의 애니메이션 속성으로 동적인 효과를 만들 수 있습니다. IE는 버전 10 이상부터 지원합니다. animation 예제 다음은 CSS로 만든 간단한 애니메이션입니다. 작은 박스가 커졌다 작아집니다. 코드는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> @keyframes big { ...

CSS / color / 글자 색 정하는 속성

CSS / color / 글자 색 정하는 속성

개요 color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 color: color | initial | inherit color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 도형 만들기 / 마름모

CSS / 도형 만들기 / 마름모

CSS로 마름모를 만들어 보겠습니다. 마름모는 삼각형을 두 개 붙여서 만들 것이므로, 삼각형을 만드는 방법을 먼저 보시는 게 좋습니다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 넣습니다. <div class="rhombus"></div> 크기를 0으로 한 후, border 속성을 이용하여 삼각형을 만듭니다. position: relative;는 나머지 반쪽의 위치를 잡기 위해 넣은 것입니다. .rhombus { width: 0px; height: 0px; ...

CSS / Flex / justify-content

CSS / Flex / justify-content

justify-content로 flex-direction으로 정한 방향으로의 정렬을 정합니다. 예를 들어 flex-direction의 값이 row라면 가로 방향의 정렬을 정합니다. 기본값은 flex-start로 시작점부터 아이템을 배치합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { ...

CSS / Grid / display

CSS / Grid / display

display: grid 그리드(grid)는 콘테이너(container)와 아이템(item)으로 구성됩니다. 아래는 그리드를 위한 간단한 HTML 문서입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...