전체 너비 Div 내에서 버튼을 가로 및 세로 중앙에 어떻게 배치할 수 있나요?

Div 요소의 버튼 중앙 정렬에 대한 종합 가이드

웹 디자인 영역에서는 요소 위치 지정 작업이 가장 중요합니다. 예를 들어, div 내의 버튼을 중앙에 배치하면 웹 사이트의 시각적 매력과 사용자 경험을 크게 향상시킬 수 있습니다.

질문:

원하는 정렬을 얻으려면 웹 개발자는 종종 다음 질문에 직면합니다.

전체 너비에 걸쳐 있는 div 내에서 버튼을 중앙에 배치하려면 어떻게 해야 합니까? (_100%_)?

답변:

최신 접근 방식: Flexbox 활용

최신 브라우저는 유연한 레이아웃을 위해 설계된 CSS 모듈인 Flexbox의 강력한 기능을 자랑합니다. Flexbox를 사용하면 수평 및 수직 축을 따라 요소를 정확하게 정렬할 수 있으므로 버튼 중앙 정렬에 이상적인 솔루션이 됩니다.

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

기존 접근 방식: 위치 지정 및 여백 활용

Flexbox를 완전히 지원하지 않거나 고정 크기가 필요한 브라우저에서는 위치 지정 및 크기 지정을 사용하는 대체 방법이 있습니다. margins.

button {
  height: 20px;
  width: 100px;
  margin: -20px -50px;
  position: relative;
  top: 50%;
  left: 50%;
}

추가 옵션

가로 가운데 맞춤의 경우에만 다음 CSS 속성을 고려하세요.

• margin: 0 auto;
• 텍스트 정렬: 가운데; 상위 div에 적용

결론:

Flexbox 및 레거시 정렬 기술의 출현 덕분에 div 내의 버튼을 중앙에 배치하는 것이 간단한 작업이 되었습니다. 특정 브라우저 지원 및 레이아웃 요구 사항에 가장 잘 맞는 접근 방식을 선택하여 버튼이 기능적일 뿐만 아니라 미학적으로도 만족스러운지 확인하세요.

위 내용은 전체 너비 Div 내에서 버튼을 가로 및 세로 중앙에 어떻게 배치할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!