Center a button between two others in OnsenUI

Question

How do I center a button between two other buttons in a toolbar?

Here's my code and resulting 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>

I'm using OnsenUI (and will be using VUE with it) so is there a class I can simply add from bootstrap or any other framework included with OnsenUI?

Or can I use some custom CSS to do this?

Similar to this question but with OnsenUI and Monaca (so good for both ios and android)

score 1 · Accepted Answer · answered Sep 14 '17 at 10:58

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

answered Sep 14 '17 at 10:58

Georgi Antonov

1,581
21
40

He wants only the second button to be in centre. please correct if i am wrong . – Krishna9960 Sep 14 '17 at 11:02
my code will make the msg icon on left, My Title on center and 3 dots icon on right – Georgi Antonov Sep 14 '17 at 11:09
: Oopppsss Sorry updated ur code at wrong place. It works.. Would have loved if you have given a fiddle . Copy pasting hurts :) – Krishna9960 Sep 14 '17 at 11:14

score 0 · Answer 2 · answered Sep 14 '17 at 10:59

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

This is just a plain css solution. updated Fiddle http://jsfiddle.net/JfGVE/2459/

Center a button between two others in OnsenUI

2 Answers2