OnsenUI에서 다른 두 버튼 사이의 가운데에 버튼을 지정하십시오.

Question

툴바의 다른 두 버튼 사이에 버튼을 배치하는 방법은 무엇입니까? 그래서 단순히 부트 스트랩 또는 기타에서 추가 할 수있는 클래스가

가 여기 내 코드와 결과 스크린 샷

<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 및 안드로이드 모두 너무 좋아)

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의 솔루션입니다. updated Fiddle http://jsfiddle.net/JfGVE/2459/