<div style="display: flex">
<address style="flex-grow: 1"/>
<icon/>
</div>
Solution 1 :
Problem :
how can i center this edit icon even when one address string is longer than the other?
This is the column I’m having this problem
<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>
Here is the complete code:
Comments
Comment posted by jsfiddle.net/3rror404/tLq2deu1/3
Why not put the icon in its own table cell?
Comment posted by pasteboard.co/Jde8AtjT.png
I tried that, but i get to much space between the icon and the strings (in my case is numbers).
Comment posted by dreijntjens
As you are using numbers (according to screenshot), use
Comment posted by Nico Haase
Please add some explanation to your answer such that others can learn from it
Comment posted by css-tricks.com/snippets/css/a-guide-to-flexbox
Flexbox (link below) is a set of gridding properties you can use in CSS.
Comment posted by Nico Haase
Please add