编辑后 Ag-grid 单元格显示错误的 css 格式答案

【问题标题】：Ag-grid cell display wrong css format after edit编辑后 Ag-grid 单元格显示错误的 css 格式
【发布时间】：2019-09-10 07:39:34
【问题描述】：

我正在学习 ag-grid 以将数据显示到网格中。我刚刚从一个简单的示例开始，使用cellRenderer 向单元格显示简单数据。可以考码here:
index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <script>
        var __basePath = '';
    </script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        span.cell1 {
            position: relative;
            float: left;
            top: 50%;
            left: 10%;
            transform: translate(50%, -50%);
        }
    </style>
    <script src="https://unpkg.com/ag-grid-community@20.2.0/dist/ag-grid-community.min.js">

    </script>
</head>

<body>

    <div id="myGrid" style="height: 100%;" class="ag-theme-balham"></div>
    <script src="main.js">

    </script>
</body>

</html>

main.js：

var columnDefs = [
    {
        field: 'gold',
        cellRenderer: params => {
            return '<span class="cell1">' + params.data.gold + '</span>';
        },
        editable: true,
    },
];

var gridOptions = {
    rowHeight: 60,
    columnDefs: columnDefs,
};

document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);

    agGrid
        .simpleHttpRequest({
            url:
                'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json',
        })
        .then(function(data) {
            gridOptions.api.setRowData(data);
        });
});

请注意我使用的css：

span.cell1 {
                position: relative;
                float: left;
                top: 50%;
                left: 10%;
                transform: translate(50%, -50%);
            }

我想在单元格中间显示数据（css：top: 50%;）所以我尝试了上面的css。但编辑后，单元格没有按预期显示。请帮忙！开始渲染：

编辑时渲染：

编辑后渲染：

【问题讨论】：

标签： html css ag-grid

【解决方案1】：

您需要更新 CSS。为span.cell1 提供height 和line-height 属性与您提供给rowHeight 的编号相同。

    span.cell1 {
        height: 60px;
        line-height: 60px;
        text-align: center;
    }

查看更新的 plunk：https://next.plnkr.co/edit/4HHSANMjCpRkTdmm

【讨论】：