2017-05-05 85 views
0

我喜歡將按鈕置於頂部的按鈕上。 如圖所示,下面的按鈕不居中。如何將按鈕置於頂部的另一個按鈕上

我嘗試作爲

.btn { 
 
    padding: 16px 22px; 
 
    color: #fff; 
 
    border-radius: 4px; 
 
    position: relative; 
 
    -webkit-transition: all .3s linear; 
 
    -moz-transition: all .3s linear; 
 
    -ms-transition: all .3s linear; 
 
    -o-transition: all .3s linear; 
 
    transition: all .3s linear; 
 
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 5px 0 rgba(0, 0, 0, 0.15); 
 
    border: none; 
 
    text-transform: uppercase; 
 
} 
 

 
.btn-center { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.btn-common { 
 
    background: #3498db; 
 
} 
 

 
.btn-xs { 
 
    border-radius: 0px; 
 
    font-size: 12px; 
 
    line-height: 1.5; 
 
    padding: 1px 5px; 
 
}
<div class="col-md-2"> 
 
    <div class="pull-right"> 
 
    <button class="btn btn-common btn-xs" ng-click="currecnySuggestion(room)"><i class="fa fa-save"></i> Book without payment</button> 
 
    <button class="btn btn-common btn-xs btn-center" ng-click="currecnySuggestion(room)"><i class="fa fa-save"></i> Book with payment</button> 
 
    </div> 
 
</div>

enter image description here

+0

你的意思是寬度不一樣? –

+0

是的不一樣。保持當前的寬度。 – batuman

+1

我真的不明白你想要做什麼。喜歡這個? http://codepen.io/mcoker/pen/RVLejV –

回答

2

如果指定的pull-right寬度(顯式,或爲了做類似display: inline-block有包裝縮小到合適的元素),並將margin: auto添加到btn-center,它應該工作。

jsfiddle

+0

您需要在css中添加'width:100%;'到'.btn' –

+0

@DanielH OP表示「center」,而不是'stretch' =) – Hodrobond

相關問題