HTML 및 CSS로 버튼을 가운데에 맞추는 방법

CSS와 HTML을 사용하여 블록 또는 인라인 블록 버튼 요소를 가운데에 맞추려면 어떻게 해야 합니까?

다소 까다로울 수 있지만 요소 유형에 관계없이 버튼을 가운데에 배치하는 방법에 대한 몇 가지 간단한 팁입니다.

인라인 블록 버튼 요소

버튼 및 링크 요소는 기본적으로 display: inline-block으로 설정됩니다. . 인라인 블록이 설정된 요소는 페이지에서 문서가 왼쪽에서 오른쪽으로 이동할 때 문서의 정상적인 흐름에 포함됩니다.

즉, 두 개의 인라인 블록 요소가 차례로 있는 경우 가로 공간이 충분하면 나란히 표시됩니다.

이것은 display: inline이 있는 요소와 유사합니다. 인라인 요소가 아닌 인라인 블록 요소의 높이와 너비를 제어할 수 있다는 점을 제외하고 설정합니다.

텍스트 정렬을 사용한 가운데 맞추기:가운데

text-align: center를 설정하여 인라인 블록(및 인라인) 요소를 가운데에 맞출 수 있습니다. 상위 요소에서.

이것이 코드에서 어떻게 작동하는지 봅시다. 다음은 HTML 마크업입니다.

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

CSS:

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

<button>을 래핑했습니다. <div>의 요소 text-align: center 사용 세트. 이렇게 하면 다음과 같이 버튼이 중앙에 배치됩니다.

차단 버튼 요소(정적 너비 포함)

블록 요소는 text-align: center를 사용하여 가운데에 맞출 수 없습니다. 정적 너비가 지정되지 않는 한 기본적으로 전체 너비가 되기 때문입니다.

버튼에 고정 너비를 설정해야 하는 경우가 있으므로 이 기술을 사용하여 버튼을 페이지 중앙에 배치할 수 있습니다.

너비를 200px로 설정한 버튼이 있다고 가정해 보겠습니다. 200픽셀에 불과하지만 옆에 다른 요소가 없도록 합니다.

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를 사용하여 인라인 블록과 블록 요소를 모두 중앙에 배치할 수 있습니다.

버튼을 부모 <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>로 래핑하여 이를 달성할 수 있습니다. flexbox를 사용하여 페이지 중앙에 배치합니다.

다음은 해당 예의 코드입니다.

<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의 모든 실제 코드를 볼 수 있습니다.