使用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的中心按钮

回答

相关问题