CSSコンテナdivをセンタリング

Question

コンテナdivに2つの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>