OnsenUIの2つのボタンの間にボタンを配置する

Question

ツールバーの他の2つのボタンの中央にボタンを配置するにはどうすればよいですか？私は単純に、ブートストラップまたはその他から追加することができますクラスがあり

はここに私のコードと結果のスクリーンショット

<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の両方のためにとても良い）

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

これは単なるCSSのソリューションです。 更新されたフィドルhttp://jsfiddle.net/JfGVE/2459/