[Solved] Quasar way to align a q-btn to the middle of a div in a template?

[murrah]

I have a q-table with a <template v-slot:bottom> into which I would like to center a button. I have tried all sorts of combinations of alignment but cannot get it to work.
eg:

<q-table
  etc >
  <template v-slot:bottom>
    <div class="relative-position">
      <q-btn
        class="center"
        round
        icon="add"
        @click="addMyThing"/>
    </div>
  </template>
</q-table>

How to do that?
Thanks again,
Murray

[beets]

@murrah Try:

<q-table
  etc >
  <template v-slot:bottom>
    <div class="row justify-center">
      <div class="col-auto">
        <q-btn
          round
          icon="add"
          @click="addMyThing"/>
      </div>
    </div>
  </template>
</q-table>

[beets]

You could also probably do:

<q-table
  etc >
  <template v-slot:bottom>
    <div class="text-center">
      <q-btn
        round
        icon="add"
        class="inline-block"
        @click="addMyThing"/>
    </div>
  </template>
</q-table>

I haven’t tested either version, but one of them should work.

[Ilia]

class=“row justify-center” (as per example above) or class=“flex flex-center” if the div has fixed height (like 100px, 100vh, etc.)

[murrah]

Thanks for your replies. They all work in straight divs but when in a table v-slot:bottom template they dont’!

Codepen: https://codepen.io/flowt-au/pen/OJRpmWw?editors=1010

The first 3 are within the table and the last 3 that are centered are outside the table.

Weird.

[Ilia]

This post is deleted!

[Ilia]

@murrah Sorry, previous message is not applicable there full-width is the key to win over that <template>

           <template v-slot:bottom>
              <div class="full-width row justify-center">
                <q-btn
                  round
                  icon="add"
                  @click="addTimeZones"/>
              </div>
            </template>

[murrah]

Yay!! That’s better!. Thank you. Very much appreciated.