[HTML/CSS] 버튼 왼쪽, 오른쪽, 가운데 정렬하기

 

이번에는 버튼을

왼쪽, 오른쪽, 가운데 정렬하는 방법을 정리해 보았습니다.

 

 

1. text-align

<div class="left">
  <button>왼쪽 정렬</button>
</div>
<div class="center">
  <button>가운데 정렬</button>
</div>
<div class="right">
  <button>오른쪽 정렬</button>
</div>

.left {
   text-align: left;
}

.center {
   text-align: center;
}


.right {
   text-align: right;
}

버튼을 감싸고 있는 div 영역에

text-align 속성을 적용하여

그 안의 버튼을 정렬하였습니다.

 

 

2. flex

<div class="container left">
  <button>왼쪽 정렬</button>
</div>
<div class="container center">
  <button>가운데 정렬</button>
</div>
<div class="container right">
  <button>오른쪽 정렬</button>
</div>

.container {
  display: flex;
}

.left {
  justify-content: flex-start;
}
.center {
  justify-content: center;
}
.right {
  justify-content: flex-end;
}

버튼을 감싸고 있는  div 컨테이너에

display: flex를 적용하고,

justify-content 속성을 적용하여 버튼을 정렬하였습니다.