如何让这些按钮居中？

时间：2017-04-16 16:09:08

标签： html css twitter-bootstrap button responsive-design

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

问题是：

如何在页面中居中显示这些按钮？即使您将页面缩小，它也必须保持居中和响应。每个按钮上的按钮之间的空间也不相同。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

要完成您想要的大部分操作，请移除将所有内容向左或向右移动的translateX()，并将.text-center添加到col类中。但是按钮之间的空间不匹配，因为空间由固定的bootstrap 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>

相关问题
最新问题