위치 래퍼 래퍼 5 div 중심

Question

나는 5 개의 단추가 연속으로있는 사운드 보드를 만들고 싶습니다. 화면이 작아지면 다음 행으로 전환하지만 모든 버튼은 중간에 가운데로 표시됩니다.

여기 코드가 있습니다. 나는 H : 100 %와 W : 100 %로 버튼 래퍼를 만들고 다른 래퍼의 중간에 div를 중심에두고 있지만 그 작업은하지 않습니다.

.wrapper{ 
 
\t width: 90%; 
 
\t max-width: 1200px; 
 
\t height:100%; 
 
\t background-color:red; 
 
\t margin: auto; 
 
} 
 

 
.buttonwrapper{ 
 
\t width:100%; 
 
\t height:100%; 
 
\t background-color:red; 
 
} 
 

 
.button{ 
 
\t width: 150px; 
 
\t height:100px; 
 
\t background-color:black; 
 
\t margin: 10px 10px; 
 
\t float:left; 
 
}

<div class="wrapper"> 
 
\t \t <div class="buttonwrapper"> 
 
\t \t \t <div class="button"></div> 
 
\t \t \t <div class="button"></div> 
 
\t \t \t <div class="button"></div> 
 
\t \t \t <div class="button"></div> 
 
\t \t \t <div class="button"></div> 
 
\t \t \t <div class="button"></div> 
 
\t \t \t <div class="button"></div> 
 
\t \t </div> 
 
\t </div>

Answer 1

이 같은 text-align: center; 및 display: inline-block;를 사용할 수 있습니다.

.wrapper{ 
 
\t width: 90%; 
 
\t max-width: 1200px; 
 
\t height:100%; 
 
\t background-color:red; 
 
\t margin: auto; 
 
    text-align: center; 
 
} 
 

 
.buttonwrapper{ 
 
\t width:100%; 
 
\t height:100%; 
 
\t background-color:red; 
 
    display: inline-block; 
 
} 
 

 
.button{ 
 
\t width: 150px; 
 
\t height:100px; 
 
\t background-color:black; 
 
\t margin: 10px 10px; 
 
\t display: inline-block; 
 
}

<div class="wrapper"> 
 
\t \t <div class="buttonwrapper"> 
 
\t \t \t <div class="button"></div> 
 
\t \t \t <div class="button"></div> 
 
\t \t \t <div class="button"></div> 
 
\t \t \t <div class="button"></div> 
 
\t \t \t <div class="button"></div> 
 
\t \t \t <div class="button"></div> 
 
\t \t \t <div class="button"></div> 
 
\t \t </div> 
 
\t </div>