CSS 居中容器 div答案

【问题标题】：CSS Centering container divsCSS 居中容器 div
【发布时间】：2016-07-31 13:53:21
【问题描述】：

我试图在一个容器 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>

【问题讨论】：

使用display:inline-block; 而不是float
@Alex 谢谢，成功了

标签： html css alignment center

【解决方案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>

【讨论】：