Centering checkbox in table column

Question

I'm trying to center checkboxes in a table column without success. The checkboxes always appear left aligned whatever alignment I use. The weird things is that same code works if I change v-checkbox for v-btn. Is there any solution to this problem?

https://codepen.io/anon/pen/QVqqVP

Here the simple view code:

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-data-table :items="apps" :headers="headers" hide-actions class="elevation-1">
            <template slot="items" slot-scope="props">
                <td class="text-xs-left">
                    <h6 class="mb-0">{{props.item.app_name}}</h6>
                </td>
                <td class="text-xs-center">
                    <v-checkbox color="primary"/> 
                </td>
            </template>
            </v-data-table>
      </v-container>
    </v-content>
  </v-app>
</div>

Here the Vue app:

new Vue({
  el: '#app',
  data: () => ({
    apps: [{'app_name':"row1"}, {'app_name':"row2"}]
  })
})

Answer 1

Of course it cannot be centered on the td given the HTML structure you have:

The actual checkbox is hidden deep inside many nested div elements. Each of these has display: block; by default which means it grabs all horizontals space its parent element allows it to get.

On top of that, the element you're using is display using flexbox.

You can center your checkboxes adding the following CSS code:

.v-input__slot {
  align-items: center;
  justify-content: center;
}