jquery - 如何制作 3 个以网格列为中心的 Action 图像？

Question

我正在使用 Kendo UI 并且我有一个包含操作列的网格。我正在使用图像进行操作。有 3 种类型的操作:接收、确认和取消。如何将这 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的魔力~

谢谢

Answer 1

如果您在图像上使用 position: absolute，我建议您像这样居中:

left: 50%;
transform: translateX(-50%);

参见this post的第三个答案了解它是如何工作的。