title: SharePoint column formatting using JSON - RAG status lights with text, how to get it align properly?
body: <p>I've almost got this working but I just need a bit of help with the formatting of the column.  I have a SharePoint list with a text column, the data that is entered into this column is a version number.  The JSON creates a red/amber/green circle based on the version number i.e. less than 6.4 = red, 6.4-6.9 = amber and 7+ = green. I've also kept the text value so this shows within the circle, as you can see here. <a href="https://i.stack.imgur.com/Z1jUZ.jpg" rel="nofollow noreferrer">SharePoint RAG column</a></p>
  
  <p>The issue I have is I can't get the circle or text to centre on the column, as you can see from my code below I am cheating by using padding, this gets the circle where I want but the text is still jammed up against the left of the column. As you can tell my JSON is a bit ropey so any help would be gratefully received.</p>
  
  <pre><code>{
    "elmType": "div",
    "txtContent": "@currentField",
    "attributes": {},
    "style": {
      "position": "absolute",
      "left": "30%",
      "top": "15%",
      "color": "black",
      "width": "40px",
      "height": "35px",
      "border-radius": "100%",
      "background-color": {
        "operator": "?",
        "operands": [
          {
            "operator": "&gt;",
            "operands": [
              "[$Software_x0020_version]",
              "6.9.9"
            ]
          },
          "#00b300",
          {
            "operator": "?",
            "operands": [
              {
                "operator": "&lt;",
                "operands": [
                  "[$Software_x0020_version]",
                  "6.3.9"
                ]
              },
              "#ec1313",
              "#ffcc00"
            ]
          }
        ]
      }
    },
    "children": []
  }
  </code></pre>