在OnsenUI中居中兩個按鈕之間的按鈕

如何在工具欄中的兩個其他按鈕之間居中按鈕？在OnsenUI中居中兩個按鈕之間的按鈕

這裏是我的代碼，並導致截圖

<div id="toptoolbar"> 
    <button class="toolbar-button"> 
    <i class="fa fa-comments" style="font-size:17px"></i> 
    </button> 

    <button class="toolbar-button"> 
    My title 
    <!-- text-purple center-block doesn't work --> 
    </button> 

    <button class="toolbar-button pull-right"> 
    <i class="fa fa-ellipsis-v" style="font-size:17px"></i> 
    </button> 
</div>

我使用OnsenUI（和將使用VUE與它），所以有一類我可以簡單地從引導或任何其他添加OnsenUI包含的框架？

或者我可以使用一些自定義CSS來做到這一點？

類似to this question但OnsenUI和莫尼卡（因此兩個iOS和Android好）

來源

2017-09-14 pashute

<div id="toptoolbar"> 
    <button class="toolbar-button"> 
    <i class="fa fa-comments" style="font-size:17px"></i> 
    </button> 
    <span class="stretcher"></span> 
    <button class="toolbar-button"> 
    My title 
    <!-- text-purple center-block doesn't work --> 
    </button> 
    <span class="stretcher"></span> 
    <button class="toolbar-button pull-right"> 
    <i class="fa fa-ellipsis-v" style="font-size:17px"></i> 
    </button> 
</div>

CSS：

#toptoolbar { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
.stretcher { 
    flex: 1; 
}

來源

2017-09-14 10:58:23

他只希望第二個按鈕居中。如果我錯了，請糾正。 – Krishna9960

我的代碼將左側的msg圖標，右側的我的標題和右側的3個點圖標 –

：Oopppsss很抱歉，在錯誤的地方更新了代碼。它的工作原理..如果你有小提琴的話，會愛上它。複製粘貼傷害:) – Krishna9960

// HTML 

<div id="toptoolbar"> 
    <button class="toolbar-button"> 
    <i class="fa fa-comments" style="font-size:17px"></i> 
    </button> 

    <button class="toolbar-button title"> 
    My title 
    <!-- text-purple center-block doesn't work --> 
    </button> 

    <button class="toolbar-button pull-right"> 
    <i class="fa fa-ellipsis-v" style="font-size:17px"></i> 
    </button> 
</div> 

//CSS 

.toolbar-button.title{ 
    position: absolute; 
    left: 49%; 
}

這僅僅是一個簡單的CSS的解決方案。已更新小提琴http://jsfiddle.net/JfGVE/2459/

來源

2017-09-14 10:59:32 Krishna9960

在OnsenUI中居中兩個按鈕之間的按鈕

回答

相關問題