How to center align a glyphicon within a cell

[ADrew2Participant]

I have a glyph icon in my angular grid that I would like to center align within the cell.

Here is the creation of the columns:

columns: any[] =
    [
        {
            text: '', 
            columngroup: 'ProductDetails',
            datafield: 'EditTemp', 
            width: "10%",
            minwidth: 100, 
            cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
                return glyphiconGridButton('edit-prospect', 'Edit temp', 'edit', row);
            }
            cellsalign: 'center', align: 'center'
            
        },
        {
            text: 'Employee #', columngroup: 'ProductDetails',
            datafield: 'EmployeeNum', width: "15%", minwidth: 100, 
            
        },
        {
            text: 'Name', columngroup: 'ProductDetails',
            datafield: 'FullName', width: "15%", minwidth: 100
        },
        {
            text: 'M/C', columngroup: 'ProductDetails', 
            datafield: 'MarketCenter', width: "15%", minwidth: 100
        },
        {
            text: 'Function', columngroup: 'ProductDetails',
            datafield: 'FunctionTitle', width: "15%", minwidth: 100
        },
        {
            text: 'Hire Date', columngroup: 'ProductDetails',
            datafeild: 'HireDate', width: "15%", minwidth: 100
        },
        {
            text: 'Term Date', columngroup: 'ProductDetails',
            datafeild: 'TermDate', width: "15%", minwidth: 100
        }
    ]; 

function for the icons

function glyphiconGridButton(cssclass, label, image, id) {
    return  '<a href="#/administration/employees/edit"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>';
}

This code aligns the header and the column cells to the center
cellsalign: 'center', align: 'center'

However this does not work when I apply it to the first column where the glyphicons are set.

How can I center align the glyph icons? Thanks

[StanislavParticipant]

Hello ADrew2,

You can use margins to position the images.
<img style="margin-left: 15px; margin-top: 10px;" ...

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[ADrew2Participant]

Perfect. Thanks!

[Author]

Posts