使用HTML和CSS的中心按鈕

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

這裏是關於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>

來源

2017-03-22 Max E

它應該是什麼樣子？我的意思是你想要的輸出。 –

@John Rey M. Baylen我希望它看起來像這樣（http://i.imgur.com/xMbxObd.png） –

你可以嘗試這樣的事情：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>

來源

2017-03-22 23:56:02 Mers

我試過了，它仍然左對齊。我想知道它是否與其他類的其他佈局上的東西有關，如浮動。 [這是頁面的樣子]（http://i.imgur.com/Z0dDt1Z.png） –

你應該包含所有相關的代碼。它很可能嵌套在另一個向左漂浮的元素中。如果你包含所有相關的代碼，那麼我們可以看看我們是否可以讓這個東西爲中心：D – Mers

這是按鈕之前的主課程代碼。這裏是圖片（https://gyazo.com/9a5b0b1530f9f955d60d061083c134a7）@Mers –

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

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

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

來源

2017-03-22 23:55:33 Splurtcake

在你的CSS

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

來源

2017-03-23 01:58:26

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

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

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

來源

2017-03-23 03:35:07 Squeakasaur

使用HTML和CSS的中心按鈕

回答

相關問題