[CSS] 가로 중앙 정렬

BookMangement 프로젝트를 만드는 과정에서 메인 페이지의 버튼을 가운데로 정렬하고 싶어서 찾은 정보이다.

 

 

인라인 요소는 text-align 속성을 이용해서 가운데 정렬이 가능하지만, 블럭 요소들은 중앙 정렬되지 않는다.

중앙 정렬을 하기 위한 여러 가지 방법이 있는데, 이 글에서는 고정 폭의 블럭 요소 중앙 정렬 하는 방법을 쓸 예정이다.

 

.button {
  display: inline-block;
  text-align: center;
  width: 48%;
  height: 100px;
  margin: 0 auto;	
}

auto 값은 element 안의 여백이 왼쪽 margin과 오른쪽 margin 사이에 대등하게 나눠짐을 의미한다.

 

위 코드를 적용한 결과창

 

이외에 가변 폭 콘텐츠의 중앙정렬, position이 absolute일 때 중앙 정렬, 세로 중앙 정렬 등등 여러 가지 정렬하는 방법을 아래의 링크에서 참고할 수 있다.

 

 

webdir.tistory.com/31

CSS 가운데(중앙) 정렬