HTML과 CSS로 버튼 가운데 정렬하는 방법 총정리

CSS와 HTML을 사용해 블록(block) 또는 인라인 블록(inline-block) 버튼 요소를 가운데 정렬하려면 어떻게 해야 할까요?

다소 까다로워 보일 수 있지만, 요소의 종류에 상관없이 버튼을 가운데 정렬할 수 있는 핵심 팁들을 상황별로 정리했습니다.

인라인 블록(inline-block) 버튼 요소

버튼(<button>)과 링크(<a>) 요소는 기본적으로 display: inline-block으로 설정되어 있습니다. inline-block이 적용된 요소는 문서의 일반적인 흐름 안에서 왼쪽에서 오른쪽 방향으로 배치됩니다.

즉, 두 개의 inline-block 요소가 연달아 있고 가로 공간이 충분하다면 나란히 표시된다는 의미입니다.

이는 display: inline이 설정된 요소와 비슷하지만, inline-block 요소는 너비와 높이를 자유롭게 조절할 수 있는 반면 inline 요소는 그렇지 못하다는 차이점이 있습니다.

text-align: center로 가운데 정렬하기

inline-block(및 inline) 요소는 부모 요소에 text-align: center를 설정하면 간단하게 가운데 정렬할 수 있습니다.

코드로 살펴보겠습니다. 먼저 HTML 마크업입니다:

<div class="text-center">
  <button type="submit">Text-align: center</button>
</div>

그리고 CSS입니다:

.text-center {
  text-align: center;
}

<button> 요소를 text-align: center가 설정된 <div>로 감싸면 다음과 같이 버튼이 가운데 정렬됩니다:

고정 너비를 가진 블록(block) 버튼 요소

블록 요소는 기본적으로 전체 너비를 차지하기 때문에 고정 너비를 지정하지 않는 한 text-align: center로는 가운데 정렬할 수 없습니다.

때로는 버튼에 고정 너비를 설정해야 하는 경우가 있습니다. 이럴 때 다음 기법을 사용하면 페이지 중앙에 버튼을 배치할 수 있습니다.

예를 들어 너비를 200px로 설정한 버튼이 있다고 가정해 보겠습니다. 실제 너비는 200px뿐이지만, 여전히 다른 요소가 옆에 위치하는 것은 허용하지 않습니다.

블록 레벨 요소는 margin-left와 margin-right를 auto로 설정하면 가운데 정렬할 수 있습니다. 단축 속성인 margin: 0 auto를 사용하면 더욱 간편합니다. (이 경우 margin-top과 margin-bottom도 함께 0으로 설정됩니다.)

코드에서 어떻게 적용되는지 살펴보겠습니다:

<button type="submit" class="block magenta margin-auto">Margin: 0 auto</button>

.button.block {
    display: block;
    width: 200px;    
}

.margin-auto {
    margin: 0 auto;
}

그러면 버튼이 페이지에서 다음과 같이 표시됩니다:

플렉스박스(flexbox)로 가운데 정렬하기

또는 플렉스박스를 활용하면 inline-block 요소와 block 요소 모두 가운데 정렬할 수 있습니다.

버튼을 부모 <div>로 감싸고, 부모 요소에 display: flex와 justify-content: center를 설정하면 됩니다.

코드는 다음과 같습니다:

<div class="flex-parent jc-center">
  <button type="submit">Inline-block button</button>
</div>

<div class="flex-parent jc-center">
  <button type="submit">Block button</button>
</div>

.flex-parent {
  display: flex;
}

.jc-center {
  justify-content: center;
}

두 개의 버튼을 나란히 배치하고 함께 가운데 정렬하기

때로는 두 개의 버튼을 나란히 배치하면서, 두 버튼 모두 페이지 중앙에 함께 정렬하고 싶은 경우가 있습니다.

이럴 때는 두 버튼을 하나의 부모 <div>로 감싸고 플렉스박스를 사용해 페이지 중앙에 정렬하면 됩니다.

예제 코드는 다음과 같습니다:

<div class="flex-parent jc-center">
  <button type="submit" class="green margin-right">Confirm</button>
  <button type="submit" class="magenta">Cancel</button>
</div>

.flex-parent {
  display: flex;
}

.jc-center {
  justify-content: center;
}

button.margin-right {
  margin-right: 20px;
}

여기서 눈여겨볼 점은 두 버튼 사이에 간격을 만들기 위해 첫 번째 버튼에 margin-right: 20px를 추가했다는 것입니다.

페이지에서 버튼이 다음과 같이 표시됩니다!

전체 코드는 Codepen에서 직접 확인해 볼 수 있습니다.