[css] 여러 div를 몽땅 가로 가운데 정렬

아래의 샘플 코드는 block 요소 div를 6개를 노출한다. 각 요소마다 한줄씩 자리 잡고 있다. 

<div class="dot">1</div>
<div class="dot">2</div>
<div class="dot">3</div>
<div class="dot">4</div>
<div class="dot">5</div>
<div class="dot">6</div>

 

.dot {
  width: 40px;
  height: 40px;
  background-color: orangered;
  color: white;
  text-align:center;
  border: 1px solid gray;
  line-height: 40px;
  margin: 0 auto;
}

 

 

 

pagination처럼 개수와 상관없이 원하는 div만큼 가운데 정렬을 시키고 싶으면, dot class에 display: inline-block으로 설정하고 wrapper를 만들어 해당 클래스에 text-align: center를 추가하면 된다.

 

dot class에 inline-block 속성을 주어 한줄씩 자리를 차리하는 것이 아니라 내부 컨텐트 크기 만큼 가지게 되어 모두 한줄로 배치된다. wrapper에서 문자를 가운데로 정렬하게 끔 설정하여 inline 속성을 가진 dot 클래스가 가운데에 정렬하게 된다.

 

 

 

 

 

<div class="dot-wrapper">
  <div class="dot">1</div>
  <div class="dot">2</div>
  <div class="dot">3</div>
  <div class="dot">4</div>
  <div class="dot">5</div>
  <div class="dot">6</div>
</div>

 

.dot-wrapper {
  text-align: center;
}

.dot {
  width: 40px;
  height: 40px;
  background-color: orangered;
  color: white;
  text-align:center;
  border: 1px solid gray;
  line-height: 40px;
  margin: 0 auto;
  display:inline-block;
}

 

 

https://www.youtube.com/watch?v=9aDke7HDqfs