CSS中心容器div

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>