CSS Центрирование контейнеров divs

Question

Я пытаюсь центрировать два divs в контейнере 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>