如何让Element UI传输对齐居中

Question

我正在使用 ElementUI，并希望将传输放在卡内并居中对齐。

我该怎么做？

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;
}

====求解决==== ===看起来你的 post 主要是代码；请添加更多详细信息。=== 我正在使用 ElementUI，并希望将传输放在卡内并居中对齐。我正在使用 ElementUI，并希望将传输放在卡内并居中对齐。我正在使用 ElementUI，并希望将传输放在卡内并居中对齐。我正在使用 ElementUI，并希望将传输放在卡内并居中对齐。

Answer 1

仅在作为父元素的容器上使用 % 宽度，大多数情况下，我建议您仅将百分比大小用于 100%，以便在全屏幕上对齐，低于 100% 的大小与当前 width 这是有风险的，因为你的布局会被丢弃，我只是把你的 30% 改成 250px，并使用 flex

居中对齐

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

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

如需实时查看，请访问 JSFIDDLE

如何让Element UI传输对齐居中

How to make ElementUI transfer aligned center

javascript

css

vue.js

element-ui