我怎样才能让这些按钮居中？

Question

我正在开发一个网站：https://www.ffat20.nl/champions

问题是：

如何让这些按钮在页面中居中？即使您使页面更小，它也必须保持居中和响应。此外，每个按钮的按钮间距也不相同。

.box {
  position: absolute;
  top: -9999px;
}

label {
  display: block;
  position: relative;
  margin: 20px;
  padding: 15px 30px 15px 62px;
  border: 3px solid #fff;
  border-radius: 100px;
  color: #fff;
  background-color: #6a8494;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: background-color .2s, box-shadow .2s;
  transition: background-color .2s, box-shadow .2s;
}

label::before {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 32px;
  border: 3px solid #fff;
  border-radius: 100px;
  -webkit-transition: background-color .2s;
  transition: background-color .2s;
}

label:first-of-type {
  -webkit-transform: translateX(-40px);
  transform: translateX(-40px);
}

label:last-of-type {
  -webkit-transform: translateX(40px);
  transform: translateX(40px);
}

label:hover,
input:focus+label {
  box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}

input:checked+label {
  background-color: #ab576c;
}

input:checked+label::before {
  background-color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-2">
      <input id="box1" class="box" type="checkbox" />
      <label for="box1">Fighter</label>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-2">
      <input id="box2" class="box" type="checkbox" />
      <label for="box2">Assassin</label>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-2">
      <input id="box3" class="box" type="checkbox" />
      <label for="box3">Support</label>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-2">
      <input id="box4" class="box" type="checkbox" />
      <label for="box4">Marksman</label>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-2">
      <input id="box5" class="box" type="checkbox" />
      <label for="box5">Tank</label>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-2">
      <input id="box6" class="box" type="checkbox" />
      <label for="box6">Tank</label>
    </div>

  </div>
</div>
<div>

Answer 1

要做大部分你想做的事情，删除translateX() 将所有内容向左或向右移动，并将.text-center 添加到 col 类。但是按钮之间的空间不匹配，因为空间是由固定的引导 col 类定义的，并且标签的宽度是可变的。另一种解决方案见下文。

.box{
  position: absolute;
  top: -9999px;
}

label {
  display: block;
  position: relative;
  margin: 20px;
  padding: 15px 30px 15px 62px;
  border: 3px solid #fff;
  border-radius: 100px;
  color: #fff;
  background-color: #6a8494;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: background-color .2s, box-shadow .2s;
  transition: background-color .2s, box-shadow .2s;
}

label::before {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 32px;
  border: 3px solid #fff;
  border-radius: 100px;
  -webkit-transition: background-color .2s;
  transition: background-color .2s;
}

label:hover, input:focus + label {
  box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}

input:checked + label {
  background-color: #ab576c;
}

input:checked + label::before {
  background-color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-lg-2 text-center">
      <input id="box1" class="box" type="checkbox" />
      <label for="box1">Fighter</label>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-2 text-center">
      <input id="box2" class="box" type="checkbox" />
      <label for="box2">Assassin</label>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-2 text-center">
      <input id="box3" class="box" type="checkbox" />
      <label for="box3">Support</label>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-2 text-center">
      <input id="box4" class="box" type="checkbox" />
      <label for="box4">Marksman</label>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-2 text-center">
      <input id="box5" class="box" type="checkbox" />
      <label for="box5">Tank</label>
    </div>
    <div class="col-xs-12 col-sm-6 col-lg-2 text-center">
      <input id="box6" class="box" type="checkbox" />
      <label for="box6">Tank</label>
    </div>

  </div>
</div>
<div>

您可以使用开箱即用的 bootstrap 4 来执行此操作，因为它使用 flexbox，但是您可以通过将父集定义为 display: flex; justify-content: center; 轻松地使用 flexbox，如果您愿意，可以使用在某个时候进行媒体查询以将其更改为flex-column。

.box{
  position: absolute;
  top: -9999px;
}

label {
  display: block;
  position: relative;
  margin: 20px;
  padding: 15px 30px 15px 62px;
  border: 3px solid #fff;
  border-radius: 100px;
  color: #fff;
  background-color: #6a8494;
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: background-color .2s, box-shadow .2s;
  transition: background-color .2s, box-shadow .2s;
}

label::before {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 32px;
  border: 3px solid #fff;
  border-radius: 100px;
  -webkit-transition: background-color .2s;
  transition: background-color .2s;
}

label:hover, input:focus + label {
  box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}

input:checked + label {
  background-color: #ab576c;
}

input:checked + label::before {
  background-color: #fff;
}

.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 500px) {
  .boxes {
    flex-direction: column;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="boxes">
  <div class="text-center">
    <input id="box1" class="box" type="checkbox" />
    <label for="box1">Fighter</label>
  </div>
  <div class="text-center">
    <input id="box2" class="box" type="checkbox" />
    <label for="box2">Assassin</label>
  </div>
  <div class="text-center">
    <input id="box3" class="box" type="checkbox" />
    <label for="box3">Support</label>
  </div>
  <div class="text-center">
    <input id="box4" class="box" type="checkbox" />
    <label for="box4">Marksman</label>
  </div>
  <div class="text-center">
    <input id="box5" class="box" type="checkbox" />
    <label for="box5">Tank</label>
  </div>
  <div class="text-center">
    <input id="box6" class="box" type="checkbox" />
    <label for="box6">Tank</label>
  </div>
</div>