html - CSS居中容器div

Question

我试图将两个 div 置于容器 div 的中心，但它不起作用。我有 text-align center 但这不起作用。我也有一个 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>