使用HTML和CSS的中心按鈕

Question

我想讓按鈕穿過中心的頁面，當它在右邊的房間用完時，它會去下一層並添加更多按鈕。我有4個按鈕，但它們會被卡住左側picture of the buttons on the page

這裏是關於CSS/HTML端的代碼。

#cyber-courses-bottom button 
 
\t { 
 
\t \t display:block; /* change this from inline-block */ 
 
\t \t height: 50px; 
 
\t \t width: 250px; 
 
    margin:0 auto; /* this will center it */ 
 
\t \t float:left; 
 
\t \t margin-right:20px; 
 
\t \t margin-bottom: 100px; 
 
\t \t position:relative; 
 
    font-style:normal; 
 
    font-weight:normal; 
 
    color:#fff; 
 
    border:none; 
 
\t \t border-radius: 0; 
 
    text-decoration:none; 
 
    text-align:center; 
 
    cursor:pointer; 
 
\t \t -webkit-transition: all 0.4s ease-in-out; 
 
    background-color:#820024; 
 
} 
 

 
.clearFloat {clear: both;} 
 
.floatRight {float: right;} 
 

 
#cyber-courses-bottom button:hover, 
 
#cyber-courses-bottom button:focus 
 
{ 
 
\t \t background: #fff; 
 
\t \t color: #820024; 
 
\t \t border: 1px solid; 
 
}

 <div id="cyber-courses-bottom"> 
 
      <div class="container"> 
 
       <div class="row"> 
 
        <div class="col-md-6 col-sm-6 wow fadeInLeft" data-wow-delay="0.9s"> 
 
         <button align="right" class="smoothScroll btn btn-default wow fadeInDown" data-wow-delay="2000" >Resources</button> 
 
\t \t \t \t \t \t \t \t \t \t \t <button align="right" class="smoothScroll btn btn-default wow fadeInDown" data-wow-delay="2000" >Resources2</button> 
 
\t \t \t \t \t \t \t \t \t \t \t <button align="right" class="smoothScroll btn btn-default wow fadeInDown" data-wow-delay="2000" >Resources3</button> 
 
\t \t \t \t \t \t \t \t \t \t \t <button align="right" class="smoothScroll btn btn-default wow fadeInDown" data-wow-delay="2000" >Resources4</button> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div>

Answer 1

你可以嘗試這樣的事情：http://codepen.io/anon/pen/MpGmBW

#cyber-courses-bottom button 
 
\t { 
 
\t \t display:block; /* change this from inline-block */ 
 
\t \t height: 50px; 
 
\t \t width: 250px; 
 
\t \t margin-right:20px; 
 
\t \t margin-bottom: 100px; 
 
\t \t position:relative; 
 
    font-style:normal; 
 
    font-weight:normal; 
 
    color:#fff; 
 
    border:none; 
 
\t \t border-radius: 0; 
 
    text-decoration:none; 
 
    text-align:center; 
 
    cursor:pointer; 
 
\t \t -webkit-transition: all 0.4s ease-in-out; 
 
    background-color:#820024; 
 
} 
 
.col-md-6 { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
} 
 
#cyber-courses-bottom button:hover, 
 
#cyber-courses-bottom button:focus 
 
{ 
 
\t \t background: #fff; 
 
\t \t color: #820024; 
 
\t \t border: 1px solid; 
 
}

 <div id="cyber-courses-bottom"> 
 
      <div class="container"> 
 
       <div class="row"> 
 
        <div class="col-md-6 col-sm-6 wow fadeInLeft" data-wow-delay="0.9s"> 
 
         <button align="right" class="smoothScroll btn btn-default wow fadeInDown" data-wow-delay="2000" >Resources</button> 
 
\t \t \t \t \t \t \t \t \t \t \t <button align="right" class="smoothScroll btn btn-default wow fadeInDown" data-wow-delay="2000" >Resources2</button> 
 
\t \t \t \t \t \t \t \t \t \t \t <button align="right" class="smoothScroll btn btn-default wow fadeInDown" data-wow-delay="2000" >Resources3</button> 
 
\t \t \t \t \t \t \t \t \t \t \t <button align="right" class="smoothScroll btn btn-default wow fadeInDown" data-wow-delay="2000" >Resources4</button> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div>

Answer 2

您可以Flexbox將很容易地做到這一點

.centered-buttons { 
    display: flex; 
    justify-content: center; 
    flex-flow: wrap; 
} 

看到這個Codepen：http://codepen.io/oculusriff/pen/Qprvmo

Answer 3

在你的CSS

.fadeInLeft { 
    overflow: hidden; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

Answer 4

類似於其他人所說添加這一點，使用Flexbox的。

.container{ 
    display: flex; 
    flex-direction: row; 
    flex-flow: row; 
    justify-content: center; 
} 

將集中你的按鈕，當你縮小頁面的按鈕會彈出下到新行，並創建兩個行。以下是Flexbox的快速概覽：https://www.w3schools.com/CSS/css3_flexbox.asp