如何在工具栏中将一个按钮居中放置在另外两个按钮之间?
这是我的代码和结果截图
<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)那么是否有一个类可以简单地从 bootstrap 或 OnsenUI 附带的任何其他框架中添加?
或者我可以使用一些自定义 CSS 来做到这一点吗?
类似to this question但是有了 OnsenUI 和 Monaca(对 ios 和 android 都很好)
最佳答案
<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;
}
关于css - 在 OnsenUI 中将一个按钮居中放置在另外两个按钮之间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46216915/