在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和Monaca（对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/