3. How to center icons in a (bottom) toolbar?

How to center icons in a (bottom) toolbar?

  • E

    0_1506157694411_android.png
    How do I center buttons with icons on a (bottom) toolbar?
    Screenshot above is from an android device with remote debugging.

    <q-toolbar slot="footer" class="mobile-only">
            <q-btn flat icon="home" @click="$router.push('/properties')">
                Properties
            </q-btn>
            <q-btn flat icon="people" @click="$router.push('/customers')">
                Customers
            </q-btn>
            <q-btn flat icon="contact_phone" @click="$router.push('/agents')">
                Agents
            </q-btn>
 </q-toolbar>
    0
  • E

    This is doing what I want:

    <q-toolbar slot="footer" class="justify-around">
            <div style="display:block">
                <q-btn flat icon="home" class="col-3" @click="$router.push('/properties')">
                    Properties
                </q-btn>
            </div>
            <div style="display:block">
                <q-btn flat icon="people" class="col-3" @click="$router.push('/customers')">
                    Customers
                </q-btn>
            </div>
            <div style="display:block">    
                <q-btn flat icon="contact_phone" class="col-3" @click="$router.push('/agents')">
                    Agents
                </q-btn>
            </div>
        </q-toolbar>
    0