html - 如何使用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/

标签： htmlcsselement-ui

Answer 1

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