如何讓這些按鈕居中？

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>