Centering q-toolbar title / Using flex CSS on q-toolbar

[sarndt]

Hello,

I’m having a bit of trouble with the q-toolbar. I wish to use the toolbar in the following way:

Have some buttons left, a centered title and some buttons right, like this:
(I’m not sure if it comes out correctly, but pretend the title is centered, and the buttons are left and right flushed)

------------------------------------------------------------------------------------------------
| Button1  Button2                         Title                                       Button3 |
------------------------------------------------------------------------------------------------

Basically, how would I do that? I tried to use <div class=".col">..</div> within the toolbar 3 times, but it doesn’t work, things like justify-around won’t work either if I have a different amount of buttons on either side.

[benoitranque]

Your best bet is diving up the available space into three parts q-toolbar>div.row-4*3

[Samulwong]

Hi Sarndt,
Did you solved your question？
I want the same design. The doc of toolbar layout doesn’t talk much about layout.

[rstoenescu]

https://jsfiddle.net/5rvxmo62/
QToolbar is using flexbox CSS, so if you understand Quasar Flex CSS or flexbox you’re good to go. And it’s easy!

[Dapeng]

Here is my solution with “absolute-center”:
<q-toolbar>
<q-toolbar-title class=“absolute-center”>Your Toolbar Title</q-toolbar-title>
</q-toolbar>