SharePoint List JSON - centering text in a list column

Question

I created the following JSON column code, but the words are not centered in the color background.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "box-sizing": "border-box",
    "border-radius": "25px",
    "padding": "0px 15px",
    "text-align": "center"
  },
  "attributes": {
    "class": {
      "operator": ":",
      "operands": [
        {
          "operator": "==",
          "operands": [
            "[$Color]",
            "Green"
          ]
        },
        "sp-css-backgroundColor-BgGreen sp-field-fontSizeSmall sp-css-color-WhiteText",
        {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$Color]",
                "Pink"
              ]
            },
            "sp-css-backgroundColor-BgCoral sp-field-fontSizeSmall sp-css-color-BlackText",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "[$Color]",
                    "Red"
                  ]
                },
                "sp-css-backgroundColor-BgRed sp-field-fontSizeSmall sp-css-color-WhiteText",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "[$Color]",
                        "Maroon"
                      ]
                    },
                    "sp-css-backgroundColor-BgDarkRed sp-field-fontSizeSmall sp-css-color-WhiteText",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "[$Color]",
                            "Gray"
                          ]
                        },
                        "sp-css-backgroundColor-BgGray sp-field-fontSizeSmall sp-css-color-WhiteText",
                        {
                          "operator": ":",
                          "operands": [
                            {
                              "operator": "==",
                              "operands": [
                                "[$Color]",
                                "Orange"
                              ]
                            },
                            "sp-css-backgroundColor-BgOrange sp-field-fontSizeSmall sp-css-color-WhiteText",
                            {
                              "operator": ":",
                              "operands": [
                                {
                                  "operator": "==",
                                  "operands": [
                                    "[$Color]",
                                    "Lime"
                                  ]
                                },
                                "sp-css-backgroundColor-BgSage sp-css-borderColor-SageFont sp-field-fontSizeSmall sp-css-color-BlackText",
                                {
                                  "operator": ":",
                                  "operands": [
                                    {
                                      "operator": "==",
                                      "operands": [
                                        "[$Color]",
                                        "Purple"
                                      ]
                                    },
                                    "sp-css-backgroundColor-BgPurple sp-field-fontSizeSmall sp-css-color-WhiteText",
                                    {
                                      "operator": ":",
                                      "operands": [
                                        {
                                          "operator": "==",
                                          "operands": [
                                            "[$Color]",
                                            "Teal"
                                          ]
                                        },
                                        "sp-css-backgroundColor-BgTeal sp-field-fontSizeSmall sp-css-color-WhiteText",
                                        {
                                          "operator": ":",
                                          "operands": [
                                            {
                                              "operator": "==",
                                              "operands": [
                                                "[$Color]",
                                                "Gold"
                                              ]
                                            },
                                            "sp-css-backgroundColor-BgGold sp-field-fontSizeSmall sp-css-color-BlackText",
                                            {
                                              "operator": ":",
                                              "operands": [
                                                {
                                                  "operator": "==",
                                                  "operands": [
                                                    "[$Category]",
                                                    ""
                                                  ]
                                                },
                                                "sp-css-backgroundColor-BgLightBlue sp-css-color-LightBlueFont",
                                                ""
                                              ]
                                            }
                                          ]
                                        }
                                      ]
                                    }
                                  ]
                                }
                              ]
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "txtContent": "[$Color]"
}

Answer 1

Hi @Vanessa ,

It seems that the text is not centered because of the padding applied to the style.

You can try adding the following style property to the div element to center the text:

"display": "flex",
"justify-content": "center",
"align-items": "center"

This should center the text both horizontally and vertically:

Hope this helps. :-)

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.