How to center icons in a (bottom) toolbar?
-
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>