Having alignment issues with GOJS Palette

Question

enter image description here`

I don't know why it works like this

enter image description here


 Toolbar = new go.Palette("ToolbarDiv", { nodeTemplateMap: Diagram.nodeTemplateMap, model: new go.GraphLinksModel([ {text: "Rectangle"}, {category: "RoundedRectangle", text: "RoundedRectangle"} ]) });
        Toolbar.add(
            $(go.Part, "Table",
                { position: new go.Point(0, 0), selectable: false },
                $(go.TextBlock, "",
                    { row: 0, font: "700 8px Droid Serif, sans-serif" }),
                $(go.Panel, "Horizontal",
                    {
                        click: (e, node) => {
                            save();
                        },
                    },
                    $(go.Panel, "Auto",
                        $(go.Picture, { width: 60, height: 60, source: "save.png", alignment: new go.Spot(0, 0.5) })
                    ))));

        Toolbar.add(
            $(go.Part, "Table",
                { position: new go.Point(0, 0), selectable: false },
                $(go.TextBlock, "",
                    { row: 0, font: "700 8px Droid Serif, sans-serif" }),
                $(go.Panel, "Horizontal",
                    {
                        click: (e, node) => {
                            save();
                        },
                    },
                    $(go.Panel, "Auto",
                        $(go.Picture, { width: 60, height: 60, source: "load.png", alignment: new go.Spot(0, 0.5) })
                    ))));`

I tried adding css and changing horizontal. Also it seems like I've tried every other way but I couldn't get them in the middle.

Answer 1

Are you trying to center each item horizontally? If so, set locationSpot: go.Spot.Center on each Part.