Zentrieren Sie eine Schaltfläche zwischen zwei anderen in OnsenUI

Question

Wie zentriere ich eine Schaltfläche zwischen zwei anderen Schaltflächen in einer Symbolleiste?

Hier mein Code ist und die daraus resultierende Screenshot

<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> 

Ich verwende OnsenUI (und wird VUE damit verwenden), so ist es eine Klasse ich einfach aus Bootstrap hinzufügen oder jede andere Rahmen mit OnsenUI enthalten?

Oder kann ich einige benutzerdefinierte CSS dazu verwenden?

ähnliche to this question aber mit OnsenUI und Monaca (so gut sowohl für iOS- und Android-)

Answer 1

<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; 
} 

Answer 2

// 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%; 
} 

Dies ist nur eine einfache CSS-Lösung. aktualisiert Fiddle http://jsfiddle.net/JfGVE/2459/