如何让这些按钮居中？

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类定义的，而标签是可变宽度的。请参阅下面的解决方案。

.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>

您可以用自举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>