[CSS]여러 개의 버튼을 가운데 정렬하는 방법

[CSS]여러 개의 버튼을 가운데 정렬하는 방법

CSS를 사용하여 여러 개의 버튼을 가운데 정렬하는 방법은 다양한 방식으로 구현할 수 있습니다. 여기서는 가장 간단하고 널리 사용되는 두 가지 방법을 설명하겠습니다.

 

1. Flexbox를 이용한 가운데 정렬:

Flexbox는 요소들을 효율적으로 정렬하고 배치하기 위한 CSS 레이아웃 모델입니다. 버튼들을 가로 방향으로 배치하고 그 부모 컨테이너를 가운데 정렬하여 구현할 수 있습니다.

HTML:

<div class="button-container">
  <button>버튼1</button>
  <button>버튼2</button>
  <button>버튼3</button>
</div>

CSS:

.button-container {
  display: flex;
  justify-content: center;
}

반응형

CSS Grid를 이용한 가운데 정렬:

CSS Grid는 요소들을 그리드(행과 열)로 배치하기 위한 CSS 레이아웃 모델입니다. 여러 개의 버튼을 그리드로 배치하고 부모 컨테이너를 가운데 정렬하여 구현할 수 있습니다.

HTML:

<div class="button-container">
  <button>버튼1</button>
  <button>버튼2</button>
  <button>버튼3</button>
</div>

CSS:

.button-container {
  display: grid;
  place-items: center;
}

두 방법 모두 버튼들을 가운데 정렬하게 됩니다. 선택할 방법은 개발자의 기호나 레이아웃에 따라 다를 수 있습니다. Flexbox는 주로 1차원 레이아웃(가로 또는 세로)에, CSS Grid는 2차원 레이아웃(가로와 세로)에 사용되는 경향이 있습니다.

추가로, 버튼의 디자인이나 여러가지 스타일을 적용하려면 해당 버튼의 CSS 스타일을 추가로 정의하시면 됩니다. 예를 들어, 버튼의 배경색, 텍스트 스타일, 마진 등을 개별적으로 설정하여 원하는 디자인을 만들 수 있습니다.