Div 내부에 버튼을 중앙에 배치하려면 어떻게 해야 합니까?

버튼을 Div 중앙에 배치

웹 개발에서는 포함된 div 내에 버튼을 중앙에 배치하는 것이 바람직한 경우가 많습니다. 이 문제에 대한 두 가지 솔루션을 살펴보겠습니다.

Flexbox 사용

Flexbox는 두 축을 따라 요소를 정렬하는 우아한 솔루션을 제공합니다. div 내에서 버튼을 수평 및 수직 중앙에 배치하려면:

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

가로 중앙 정렬만 원하는 경우 justify-content 속성을 사용할 수 있습니다:

#wrapper {
  display: flex;
  justify-content: center;
}

Margin- 기반 접근 방식

Flexbox가 없으면 다음을 사용하여 버튼을 중앙에 배치할 수 있습니다. margins:

button {
  margin: -20px -50px; /* Offset to center */
  position: relative;
  top: 50%;
  left: 50%;
}

가로 중심 맞춤의 경우에만 다음 두 가지 접근 방식 중 하나를 사용할 수 있습니다.

• margin: 0 auto; 버튼
• text-align: center; 포함된 div

위 내용은 Div 내부에 버튼을 중앙에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!