How to center icons in a (bottom) toolbar?



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


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

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.