CSS에서 버튼 중앙 정렬
- 버튼을 수직 및 수평으로 중앙에 배치
- 버튼을 중앙에 배치하는 다양한 방법
-
text-align: center를 사용하여 버튼 중앙 정렬 -
display: grid및margin: auto를 사용하여 버튼 중앙에 배치 -
display: flex를 사용하여 버튼 중앙 정렬 -
position: fixed를 사용하여 버튼 중앙에 배치 - 2개 이상의 버튼 중앙에 배치
- 결론
HTML 웹 페이지의 가장 섬세한 스타일은 주로 CSS를 통해 이루어집니다. 웹 페이지의 구성 요소 배열은 CSS로 제어할 수 있습니다.
웹 페이지 중앙에 버튼을 정렬하는 방법에는 여러 가지가 있습니다. 버튼의 정렬은 원하는 대로 수평 또는 수직으로 맞출 수 있습니다.
버튼을 수직 및 수평으로 중앙에 배치
이 예제에서는 위치 지정 및 transform 속성을 사용하여 button 요소를 수직 및 수평 중앙에 배치합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 200px;
position: relative;
border: 2px solid blue;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<div class="center">
<button>Button at the Center</button>
</div>
</div>
</body>
</html>
여기에서는 중앙 정렬을 명확하게 표시하기 위해 컨테이너 내의 버튼 보기를 설정했습니다.
버튼을 중앙에 배치하는 다양한 방법
다음 방법을 사용하여 단추를 중앙에 배치할 수 있습니다.
text-align: center- 상위div태그의text-align속성 값을center로 입력합니다.margin: auto-margin속성 값을auto에 입력합니다.display: flex-display속성 값을flex로 입력하고justify-content속성 값을center로 설정합니다.디스플레이: 그리드-디스플레이속성 값을그리드로 입력합니다.
버튼을 중앙에 배치하는 데 사용할 수 있는 다른 방법이 더 있습니다.
text-align: center를 사용하여 버튼 중앙 정렬
다음 예제에서는 text-align 속성을 사용하고 해당 값을 center로 설정합니다. 이는 body 태그 또는 요소의 상위 div 태그 내에 배치할 수 있습니다.
text-align: center를 버튼 요소의 상위 div 태그에 배치:
<!DOCTYPE html>
<html>
<head>
<style>
.container{
text-align: center;
border: 2px solid blue;
width: 300px;
height: 200px;
padding-top: 100px;
}
#bttn{
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<button id ="bttn"> Button at the Center </button>
</div>
</body>
</html>
body 태그 내에 text-align: center 배치:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<button>Button at the Center</button>
</body>
</html>
필요한 경우 버튼을 페이지의 정중앙으로 이동하고 padding-top 속성을 사용해야 하지만 이 방법은 버튼을 중앙에 배치하는 가장 좋은 방법은 아닙니다.
display: grid 및 margin: auto를 사용하여 버튼 중앙에 배치
여기서는 CSS에서 display: grid 속성과 margin: auto 속성을 사용합니다. display: grid는 다음 예제에서 button 요소의 상위 div 태그에 배치됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 300px;
border: 2px solid blue;
display: grid;
}
button {
background-color: lightpink;
color: black;
font-size: 18px;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<button>Button at the Center</button>
</div>
</body>
</html>
여기에서 버튼은 수직 및 수평 위치의 중앙에 배치됩니다.
grid 값이 있는 display 속성은 컨테이너 내에서 사용됩니다. 따라서 버튼에 영향을 주는 버튼 요소에 자동과 같은 여백 속성이 사용되는 동안 컨테이너에 영향을 미칩니다.
이 두 속성은 버튼을 중앙에 배치하는 데 필수적인 역할을 합니다.
display: flex를 사용하여 버튼 중앙 정렬
버튼을 중앙에 정렬할 때 가장 많이 사용하는 방법입니다. 여기에 세 가지 속성이 있습니다. display: flex;, justify-content: center; 및 align-items: center;는 버튼을 중앙에 배치하는 데 필수적인 역할을 합니다.
이 예제는 수직 및 수평 위치의 중심에 있는 버튼의 정렬을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 300px;
border: 2px solid blue;
display: flex;
justify-content: center;
align-items: center;
}
button {
background-color: lightpink;
color: black;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<button>Button at the Center</button>
</div>
</body>
</html>
position: fixed를 사용하여 버튼 중앙에 배치
페이지 왼쪽에서 50%의 여백을 제공하고 다음 예제에서 본문 중앙의 위치만 취하는 position: fixed를 설정합니다.
<!DOCTYPE html>
<html>
<head>
<style>
button {
position: fixed;
left: 50%;
}
</style>
</head>
<body>
<div class="button-container-div">
<button>Button at the Center</button>
</div>
</body>
</html>
여기서 버튼은 전체 웹 페이지의 중앙에 적용되지 않습니다.
2개 이상의 버튼 중앙에 배치
두 개 이상의 버튼이 있는 경우 모든 버튼을 하나의 div 요소로 래핑한 다음 flexbox 속성을 사용하여 버튼을 중앙에 정렬할 수 있습니다. 두 개의 버튼이 하나의 div 요소로 간주되면 모든 속성이 둘 다에 적용됩니다.
예를 들어:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-box {
display: flex;
}
.jc-center {
justify-content: center;
}
button.margin-right {
margin-right: 20px;
}
</style>
</head>
<body>
<div class="flex-box jc-center">
<button type="submit" class="margin-right">Select</button>
<button type="submit">Submit</button>
</div>
</body>
</html>
또는 다음 예제에 따라 flexbox를 사용하여 인라인 블록과 블록 요소를 모두 중앙에 배치할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-box {
display: flex;
}
.jc-center {
justify-content: center;
}
</style>
</head>
<body>
<div class="flex-box jc-center">
<button type="submit">Select</button>
</div>
<br>
<div class="flex-box jc-center">
<button type="submit">Submit</button>
</div>
</body>
</html>
결론
CSS와 HTML에서 서로 다른 속성을 사용하여 버튼을 중앙에 배치하는 방법은 많습니다. 위에서 언급한 것처럼 HTML과 공동으로 CSS의 다양한 속성을 사용하여 쉽게 웹 페이지에서 단추 또는 단추를 중심에 두기 위해 다양한 접근 방식을 사용할 수 있습니다.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.