Vue.js, bootstrap-vue, <b-table> 元素垂直对齐答案

【问题标题】：Vue.js, bootstrap-vue, <b-table> element vertical alignVue.js, bootstrap-vue, <b-table> 元素垂直对齐
【发布时间】：2021-06-23 09:21:09
【问题描述】：

您好，我想在我的 vue/bootstrap 项目中的 b 表中垂直对齐元素。

我的代码：

<template>
  .....
  <b-table small :fields="fields" :items="items" responsive="sm">
    <template #cell(name)="data">
      <b class="text-dark">{{ data.value }}</b>
    </template>

    <template #cell(utility)="data">
      <b class="text-dark">{{ data.value }}</b>
    </template>

    <template #cell(icon)="data">
      <img v-bind:src="data.value" alt="...." width="50" height="50">
    </template>
  </b-table>
  .....
</template>

<script>
......
  data () {
    return {
      fields: ['name', 'utility', 'icon'],
      items: [
        { name: '.....', utility: '.....', icon: '/img/......a6c26916.png' },
        { name: '.....', utility: '.....', icon: '/img/......5233a552.png' },
        { name: '.....', utility: '.....', icon: '/img/......96e5850d.png' },
        { name: '.....', utility: '.....', icon: '/img/......41bab77c.png'}
      ]
    }
  }
......
</script>

如何垂直对齐“<b>...</b>”文本？
我在页面上按 F12，默认情况下 boostrap 为 th 和 td 元素设置垂直对齐：顶部。
我已经尝试设置 inline 和 <style> 中的垂直对齐：中间但它没有工作。
怎么改？
谢谢

【问题讨论】：

标签： vue.js html-table bootstrap-vue

【解决方案1】：

您可以使用field definitions 中的tdClass 属性将类应用于渲染的TD。您可以使用它来应用align-middle utility class，使您的文本在列中居中。

fields: [
  { key: 'name', tdClass: 'align-middle' }, 
  { key: 'utility', tdClass: 'align-middle' },
  'icon'
]

【讨论】：