How to center icons in a (bottom) toolbar?

eric-naguras

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>

eric-naguras

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>