CSS Centering Container divs

Question

Ich versuche, zwei Divs in einem Container Div zu zentrieren, aber es funktioniert nicht. Ich habe Text-Align-Center, aber das funktioniert nicht. Ich hatte auch ein HTML-Center-Tag, aber das hat auch nicht funktioniert. Irgendwelche Ideen?

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

Verwenden display:inline-block statt float:left;

Sie können auch Gruppenauswahl Wiederholung gleichen Stile zu vermeiden.

#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>