居中按钮和容器[重复]答案

【问题标题】：Centering buttons and containers [duplicate]居中按钮和容器[重复]
【发布时间】：2019-03-21 01:33:34
【问题描述】：

我需要一些帮助来集中我的一些代码。我不确定我是否使用了错误的定心方法，但它对我来说不太有效。它是 HTML 代码，但旨在为移动使用而编码。我的代码的问题是按钮容器不会以屏幕居中并保持左对齐。

.btn-container {
  margin: 0 auto;
  align-content: center;
  display: flex;
  border: none;
}

.btn-group button {
  width: 150px;
  height: 120px;
  display: flex;
  justify-content: center;
  background-color: #404040;
  border: none;
  margin: 10px;
  cursor: pointer;
  float: left;
}

.btn-group button:not(:last-child) {
  border-right: none;
  /* Prevent double borders */
}


/* Clear floats (clearfix hack) */

.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

<body>
  <div class="destination-title">
    <a>Choose Your Destination</a>
  </div>

  <div class="btn-container">
    <div class="btn-group">
      <button>Opt 1</button>
      <button>Opt 2</button>
      <button>Opt 3</button>
      <button>Opt 4</button>
      <button>Opt 5</button>
      <button>Opt 6</button>
    </div>
  </div>

  <div class="button-divider"></div>

  <div>
    <button class="continue-button"> <ahref="customize.html">Continue</a></button>
  </div>
</body>

【问题讨论】：

你想要什么居中的exaclty？
您的问题不清楚。什么是错的，什么是好的，你想得到什么？
对不起！我的整个按钮容器不会居中并粘在左边距
无论你使用 floats 还是 flexbox 项目 - see here 如果 CSS 网格是一个选项
不要混用float和Flexbox，你的btn-group也需要显示为flex容器。

标签： html css flexbox

【解决方案1】：

下面的CSS 将使弹性项目在任何屏幕分辨率下居中。对于外部容器.btn-container，使用justify-content: center 而不是align-content: center。内部容器.btn-group 需要与其父容器相同的flexbox 规则。

.btn-container,
.btn-group {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

如 cmets 中所述，您不应将 float 与 flexbox 混用。我从您的CSS 以及您添加的clearfix hack 中删除了float 属性。这个hack是为了处理浮动内容而发明的。 Flexbox 没有这个问题。

演示

.btn-container {
  margin: 0 auto;
  border: none;
}

.btn-container,
.btn-group {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

.btn-group button {
  width: 150px;
  height: 120px;
  display: flex;
  justify-content: center;
  background-color: #404040;
  border: none;
  margin: 10px;
  cursor: pointer;
}

<body>
  <div class="destination-title">
    <a>Choose Your Destination</a>
  </div>

  <div class="btn-container">
    <div class="btn-group">
      <button>Opt 1</button>
      <button>Opt 2</button>
      <button>Opt 3</button>
      <button>Opt 4</button>
      <button>Opt 5</button>
      <button>Opt 6</button>
    </div>
  </div>

  <div class="button-divider"></div>

  <div>
    <button class="continue-button"> <ahref="customize.html">Continue</a></button>
  </div>
</body>

【讨论】：

【解决方案2】：

你可以添加 justify-content: center;在 .btn-container 类中

.btn-container {
  margin: 0 auto;
  align-content: center;  /*Could probably be removed.*/
  justify-content: center; /*Try adding this according to https://www.addtoany.com/buttons/customize/center_align_buttons*/
  display: flex;
  border: none;
}

【讨论】：