vue.js - Vuetify 中 中的水平对齐

Question

我在下表中无法对齐某些项目，例如复选框和操作:

这是 table :

<v-data-table
        :headers="headers"
        :items="users"
        hide-actions
        class="elevation-1"
>
    <template slot="items" slot-scope="props">
        <td>{{ props.item.email }}</td>
        <td class="text-xs-left">{{ props.item.empresa.descripcion}}</td>
        <v-checkbox disabled v-model="props.item.isAdmin"></v-checkbox> 
        <td class="text-xs-left">{{ props.item.createdAt }}</td>
        <td class="justify-center layout px-0">
            <v-icon
                    small
                    class="mr-2"
                    @click="editItem(props.item)"
            >
                Editar
            </v-icon>
            <v-icon
                    small
                    left
                    class="mr-2"
                    @click="deleteItem(props.item)"
            >
                Eliminar
            </v-icon>
        </td>
    </template>
</v-data-table>

我需要对齐 v-checkbox和 v-icon .

<style> 中没有 css部分。

Answer 1

尝试包装<v-layout justify-center></v-layout>与 <td></td>就像 Ohgodwhy 评论一样。

应该是这样的:

<v-data-table
        :headers="headers"
        :items="users"
        hide-actions
        class="elevation-1"
>
    <template slot="items" slot-scope="props">
        <td>
            <v-layout justify-center>
                {{ props.item.email }}
            </v-layout>
        </td>
        <td>
            <v-layout justify-center>
                {{ props.item.empresa.descripcion}}
            </v-layout>
        </td>
        <td>
            <v-layout justify-center>
                <v-checkbox disabled v-model="props.item.isAdmin"></v-checkbox>
            </v-layout>
        </td>
        <td>
            <v-layout justify-center>
                {{ props.item.createdAt }}
            </v-layout>
        </td>
        <td>
            <v-layout justify-center>
                <v-icon
                    small
                    class="mr-2"
                    @click="editItem(props.item)"
                >
                    Editar
                </v-icon>
                <v-icon
                    small
                    left
                    class="mr-2"
                    @click="deleteItem(props.item)"
                >
                    Eliminar
                </v-icon>
            </v-layout>
        </td>
    </template>
</v-data-table>