来自 Vuetify 的 <v-data-table> 中的水平对齐

Question

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

这是表：

<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。

该部分没有css <style>。

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>