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

  • 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.

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

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

  • Admin
    QToolbar is using flexbox CSS, so if you understand Quasar Flex CSS or flexbox you’re good to go. And it’s easy!

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

Log in to reply