中心按鈕

Question

我有一個負責任的網站上，我有2個按鈕的網頁之一，他們是彼此相鄰當屏幕尺寸足夠寬，以適應這兩個按鈕，當頁面變得更小（即對於智能手機），然後第二個按鈕（右）低於第一個。這工作正常。

然而，當按鈕是一個在另一個之上它們被定位在左側，我想中心它們。

我已經基於這樣的事：http://jsfiddle.net/erenyener/puA72/2/

這裏是一個JS小提琴：https://jsfiddle.net/kg2grant/

下面是代碼：

HTML

<div class="button-wrapper"> 

<div class="fiftyLEFT" ><button type="submit" class="submit" value="submit" name="submit_button"><span>Search</span></button></div> 

<div class="fiftyRIGHT"><button onclick="location.href='https://google.com';" class="submit" style="font-size: 22px; width: 500px" value="show" name="show_button">Google</button></div> 

</div> 

CSS

button.submit { 
    border: none; 
    background-image: linear-gradient(-180deg, #52A1DD 50%, #53A2DE 100%); 
    border-radius: 100px; 
    max-width: 90%; 
    margin-right: 5%; 
    padding: 8px 10px; 
    font-size: 26px; 
    color: #fff; 
    line-height: 30px; 
    cursor: pointer; 
    -webkit-transition: all .15s ease-in-out; 
    -moz-transition: all .15s ease-in-out; 
    -o-transition: all .15s ease-in-out; 
    transition: all .3s ease-in-out; 
    margin-top: 10px; 
    z-index: 1; 
    position: relative; 
    } 

button.submit:hover { 
    color: #3193e9; 
    background: #fff; 
    } 

button.submit { 
    width: calc(.5px + 50vw); 
    } 

button.submit img: hover { 
    background-color: #C37500; 
    opacity:0.7 !important; 
    filter:alpha(opacity=70) !important; 
    } 

.button-wrapper 
{ 
    width:100%; 
    padding-top:10px; 
    padding-bottom:10px; 
    display:inline-block; 
    border: 3px solid black 
} 

.button-wrapper > .fiftyLEFT 
{ 
    width:50%; 
    float:left; 
    min-width:50px 
} 

.button-wrapper > .fiftyRIGHT 
{ 
    min-width:400px; 
    width:50%; 
    float:left; 
    white-space: nowrap; 
} 

我已經嘗試了很多喜歡margin 0 auto的東西，並添加了另一個容器，但沒有運氣！在此先感謝您的幫助。

Answer 1

您可以將顯示更改爲flex和實現你想要的使用@media查詢。

歧路的jsfiddle與所需的行爲：https://jsfiddle.net/o1gpcLcr/

Answer 2

您必須刪除浮動離開物業辦保證金自動。

.button-wrapper > .fiftyLEFT { 
    width: 50%; 
    /* float: left; */ 
    min-width: 50px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.button-wrapper > .fiftyRIGHT { 
    min-width: 400px; 
    width: 50%; 
    /* float: left; */ 
    white-space: nowrap; 
    margin-left: auto; 
    margin-right: auto; 
} 

然後執行浮動留在更大的屏幕與@media（最小寬度：768px），或任何你想要它打破。

Answer 3

使用浮動保證金，使汽車運行異常，因爲浮動元素已經從內容的正常流動去除。如果您從最後兩條CSS規則中刪除float: left並聲明margin: auto，它應該可以工作。

或者，你可以刪除float: left，然後添加

display: flex; 
flex-flow: column; 
justify-content: center; 
align-items: center; 

您.button-包裝規則。使用flexbox與margin auto具有相同的效果，但可能會在開發後更容易地進行其他更改和添加。 要了解有關flexbox的更多信息，請查看https://flexbox.io瞭解一些優秀的視頻教程。

Answer 4

你要使用CSS媒體查詢，用更多的是「移動第一」的方針。

使按鈕寬度：100％通過默認，然後使用@media（最小寬度：768px）{...}的寬度改變爲50％。

我做了一些更改代碼：

button.submit { 
 
    border: none; 
 
    background-image: linear-gradient(-180deg, #52A1DD 50%, #53A2DE 100%); 
 
    border-radius: 100px; 
 
    padding: 8px 10px; 
 
    margin: 5px 0; 
 
    font-size: 26px; 
 
    color: #fff; 
 
    line-height: 30px; 
 
    cursor: pointer; 
 
    -webkit-transition: all .15s ease-in-out; 
 
    -moz-transition: all .15s ease-in-out; 
 
    -o-transition: all .15s ease-in-out; 
 
    transition: all .3s ease-in-out; 
 
    z-index: 1; 
 
    position: relative; 
 
} 
 

 
button.submit:hover { 
 
    color: #3193e9; 
 
    background: #fff; 
 
} 
 

 
button.submit img: hover { 
 
    background-color: #C37500; 
 
    opacity:0.7 !important; 
 
    filter:alpha(opacity=70) !important; 
 
} 
 

 
.button-wrapper { 
 
    width:100%; 
 
    padding: 10px 0; 
 
    display:inline-block; 
 
    border: 3px solid black 
 
} 
 

 
button { 
 
    width: 100%; 
 
} 
 

 
@media (min-width: 768px) { 
 
    button { 
 
    float: left; 
 
    width: 50%; 
 
    white-space: nowrap; 
 
    } 
 
}

  <div class="button-wrapper"> 
 

 
      <div class="button" ><button type="submit" class="submit" value="submit" name="submit_button"><span>Search</span></button></div> 
 

 
      <div class="button"><button onclick="location.href='https://google.com';" class="submit" value="show" name="show_button">Google</button></div> 
 
      
 
      </div>