CSS centering container divs

Question

컨테이너 div에 두 개의 div를 가운데에 놓으려고하는데 작동하지 않습니다. 텍스트 정렬 센터가 있지만 작동하지 않습니다. 나 또한 HTML 센터 태그를 가지고 있지만 그것도 작동하지 않았다. 어떤 아이디어?

CSS :

#wrapper{ 
     display:block; 

    text-align: center; 
} 
#left { 
    float: left; 
margin-right: 30px; 
width: 70px; 

    text-align: center; 

} 

#right { 

float: left; 
    text-align: center; 
    width: 70px; 

} 

HTML :

<div id="wrapper"> 
    <div id="left"> 
     One: 
     <p> 
     <button onclick="plus" id="6">plus</button> 
     <p> 
     <button onclick="minus" id="7">minus</button></div>  

     <div id="right"> 
     Two 
     <p> 

     <button onclick="plus2" id="6">plus</button> 
     <p> 
     <button onclick="minus2" id="7">minus</button></div> 
</div> 

Answer 1

사용 display:inline-block 대신 float:left;

의 또한 그룹 선택기가 반복 동일한 스타일을 피할 수 있습니다.

#wrapper{ 
 
    display:block; 
 

 
    text-align: center; 
 
} 
 
#left, #right{ 
 
    display: inline-block; 
 
    text-align: center; 
 
    width: 70px; 
 
} 
 
#left { 
 
    margin-right: 30px; 
 
}

<div id="wrapper"> 
 
<div id="left"> 
 
    One: 
 
    <p> 
 
    <button onclick="plus" id="6">plus</button> 
 
    <p> 
 
    <button onclick="minus" id="7">minus</button></div>  
 

 
    <div id="right"> 
 
    Two 
 
    <p> 
 

 
    <button onclick="plus2" id="6">plus</button> 
 
    <p> 
 
    <button onclick="minus2" id="7">minus</button></div> 
 
</div>

이