Sp-dev-docs: What is the JSON syntax to format > center-align text in a SharePoint column

[SantiagoIglesiasLucas]

Category

• [X] Question
• [ ] Typo
• [ ] Bug
• [ ] Additional article idea

Hello,

I've used the below piece of code to hightlight a date in the past (column name is 'Due Date') in a SharePoint Online list. It works OK (background color is red for past dates, and green for the rest). The text, however is not centered (nor horizontally, nor vertically) even though I've included this:
"text-align": "center", "vertical-align": "center",

What is it that I am missing? Many thanks in advance.

{ "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"elmType": "div",
"debugMode": "true",
"txtContent": "@currentField",
"style": {
"text-align": "center",
"vertical-align": "center",
"background-color": "=if([$Due_x0020_Date] <= @now, '#ffcccc', '#ccffcc'"
}
}

[thechriskent]

This should work for you:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "background-color": "=if([$Due_x0020_Date] <= @now, '#ffcccc', '#ccffcc')",
    "display": "table",
    "width": "100%"
  },
  "children": [
    {
      "elmType": "div",
      "txtContent": "@currentField",
      "style": {
        "display": "table-cell",
        "text-align": "center",
        "vertical-align": "middle"
      }
    }
  ]
}

Please let me know if you have any other questions, thanks!

[SantiagoIglesiasLucas]

It dit. Perfectly well. Many thanks!

[vincentnoiset]

Tkx

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues