如何使用 ui 元素使行中的图标居中

Question

即使一个地址字符串比另一个长，我如何让这个编辑图标居中？

这是我遇到问题的专栏

 <el-table-column
        prop="address"
        label="Address">
         <template slot-scope="scope">
              {{scope.row.address}}
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                size="mini"
                style="margin-left: 55px"
                @click="open(scope.$index, scope.row)"
              ></el-button>
            </template>
      </el-table-column>

完整代码如下：

https://jsfiddle.net/xhbzpvas/

Answer 1

<div style="display: flex">
  <address style="flex-grow: 1"/>
  <icon/>
</div>

如何使用 ui 元素使行中的图标居中

how to Center icon in rows using ui element

html

css

element-ui