我正在使用Kendo UI，并且具有具有“操作列”的网格。我正在使用图像进行操作。动作分为3种：收据，确认和取消。如何居中这三个图标？这是我的代码：
{
name: 'Action',
text: 'Action',
align: 'center',
width: 150,
template: function (item) {
return item.is_paid != true ? `<div class="action-icon">
<div class="button-logo">
<img src="img/paid-grey.svg" class="receipt-grey icon-btn icon-grey icon-receipt">
</div>
<div class="button-logo">
<img src="img/confirm.svg" class="confirm icon-btn icon-style icon-confirm" onClick="confirm()">
<span class="confirmText">Konfirmasi</span>
</div>
<div class="button-logo">
<img src="img/cancel.svg" class="cancel icon-btn icon-style icon-cancel" onClick="cancel()">
<span class="cancelText">Cancel</span>
</div>
</div>` :
`<div class="action-icon-paid">
<div class="button-logo">
<img src="img/bukti-bayar.svg" class="receipt icon-btn icon-style" onClick="receipt()">
<span class="receiptText">Bukti Bayar</span>
</div>
<div class="button-logo">
<img src="img/confirm-grey.svg" class="confirm icon-btn icon-grey icon-confirm-grey">
</div>
<div class="button-logo">
<img src="img/cancel-grey.svg" class="cancel icon-btn icon-grey icon-cancel-grey">
</div>
</div>`
}
}
我的CSS代码：
.action-icon {
display: flex !important;
margin-left: auto;
margin-right: auto;
// display: block;
}
.action-icon-paid {
display: flex !important;
margin-left: auto;
margin-right: auto;
// display: block;
}
.icon-style {
width: 35px;
cursor: pointer; // transform: scale(3);
}
.icon-grey {
width: 35px;
cursor: default; // transform: scale(3);
}
.icon-receipt {
position: relative;
top: 1.2px;
left: 0px;
}
.icon-confirm {
position: relative;
left: -22.8px;
}
.icon-confirm-grey {
position: relative;
left: -22.8px;
}
.icon-cancel {
position: relative;
left: -42.8px;
}
.icon-cancel-grey {
position: relative;
left: -42.8px;
}
.button-logo {
margin: 0px 14px;
position: relative;
width: 50px;
}
.receiptText {
visibility: hidden;
width: 67px;
background-color: #393940;
color: #F4723D;
text-align: center;
border-radius: 6px;
padding: 0px 0;
/* Position */
position: absolute;
z-index: 1;
bottom: 60%;
left: -50%;
font-size: small;
}
.button-logo:hover .receiptText {
visibility: visible;
}
.confirmText {
visibility: hidden;
width: 62px;
background-color: #393940;
color: #F4723D;
text-align: center;
border-radius: 6px;
padding: 0px 0;
/* Position */
position: absolute;
z-index: 1;
bottom: 60%;
left: -110%;
font-size: small;
}
.button-logo:hover .confirmText {
visibility: visible;
}
.cancelText {
visibility: hidden;
width: 45px;
background-color: #393940;
color: #F4723D;
text-align: center;
border-radius: 6px;
padding: 0px 0;
/* Position */
position: absolute;
z-index: 1;
bottom: 60%;
left: -130%;
font-size: small;
}
.button-logo:hover .cancelText {
visibility: visible;
}
如您所见，我为此使用了6张图像。其中一半颜色为灰色，以向用户显示是否无法单击该操作。我无法集中这些图像。你能帮我实现这个目标吗？也许具有CSS风格或Jquery的魔力〜
谢谢