如何使ElementUI传输对齐中心

Question

我使用的是ElementUI，我想把传输卡和对齐中心。

https://jsfiddle.net/ca1wmjLx/

我该怎么做？

HTML

    <script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.3.7/lib/index.js"></script>
<div id="app">
<template>
<el-card>
  <el-transfer v-model="value3"  :left-default-checked="[2, 3]" :right-default-checked="[1]" :titles="['Source', 'Target']" :button-texts="['to left', 'to right']" :footer-format="{
      noChecked: '${total}',
      hasChecked: '${checked}/${total}'
    }" @change="handleChange" :data="data">
    <el-button class="transfer-footer" slot="left-footer" size="small">OP</el-button>
    <el-button class="transfer-footer" slot="right-footer" size="small">OP</el-button>
  </el-transfer>
  </el-card>
</template>
</div>

JS

var Main = {
    data() {
      const generateData = _ => {
        const data = [];
        for (let i = 1; i <= 15; i++) {
          data.push({
            key: i,
            label: `option ${ i }`,
            disabled: i % 4 === 0
          });
        }
        return data;
      };
      return {
        data: generateData(),
        value3: [1]
      };
    },

    methods: {
      handleChange(value, direction, movedKeys) {
        console.log(value, direction, movedKeys);
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

CSS

@import url("//unpkg.com/element-ui@1.3.7/lib/theme-default/index.css");
.transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }

.el-transfer-panel {
  width: 30%;
}

.el-transfer-panel__body {
  height: 500px;
}

.el-transfer-panel__list.is-filterable {
  height: 468px;
}

====TO SOLVE==== ===It看起来像你的帖子大多是代码；请添加一些更多的details.===，我正在使用ElementUI，并希望把传输卡和对齐中心。我使用的是ElementUI，我想把传输卡和对齐中心。我使用的是ElementUI，我想把传输卡和对齐中心。我使用的是ElementUI，我想把传输卡和对齐中心。

Answer 1

仅在作为父元素的容器上使用%宽度，我建议您只使用100%的百分比大小，在完整的screnn上对齐，在宽度上低于100%的大小，因为您的布局将被删除，我只是将您的30%更改为250 on，并使用flex对齐中心对齐。

.el-transfer-panel {
  width: 250px;
}

.el-card{
  display: flex;
  align-items:  center;
  justify-content: center;
}

要获得实时视图，请访问JSFIDDLE