여러 가지 버튼 가운데 정렬 시키는 방법

편의상 클래스 A, B로 설명.

 

1. <div>태그로 여러 버튼(클래스 B)들을 감싸면서 클래스(A) 지정해주고 

<div class="find-btn">
	<button type="button" class="btn">
</div>

2. 클래스 A의 스타일(css)에 text-align: center로 중앙정렬하고

3. 클래스 B의 스타일(css)에 inline-block 속성을 준다.

<style>
<!-- 클래스 A -->
.find-btn{
	text-align: center;
}

<!-- 클래스 B -->
.btn { 
	display:inline-block;
}

---

이렇게 왼쪽으로 정렬되어 있는걸 중앙정렬 만들고 싶은 상황

 

<style>태그 안에 클래스 A 속성 넣어주기

<div>태그 이용해서 여러 버튼들(클래스B)를 클래스 A로 묶어주기

처음과 다르게 가운데 정렬된 것을 알 수 있다.

출처:  https://moongom.tistory.com/entry/CSS-%EB%B2%84%ED%8A%BC-%EA%B0%80%EC%9A%B4%EB%8D%B0-%EC%A0%95%EB%A0%AC%ED%95%98%EA%B8%B0-button?category=997297