sharepoint list gallery view, center text vertically

I have a single column selected in card design and made some changes to the advanced formatting, but I cannot get the text to center vertically in each. Any suggestions on how to fix this would be greatly appreciated.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 70,
  "width": 190,
  "hideSelection": false,
  "fillHorizontally": false,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "sp-card-defaultClickButton"
        },
        "customRowAction": {
          "action": "none"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-sharedCyanBlue10 sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "style": {
                  "padding": "4px",
                  "white-space": "wrap",
                  "word-break": "keep-all",
                  "text-align": "center",
                  "font-weight": "700",
                  "font-size": "18px"
                },
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-white sp-card-content sp-card-highlightedContent",
                  "role": "heading",
                  "aria-level": "3"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          }
        ]
      }
    ]
  }
}

Lists

microsoft lists

jstander

Mar 31, 2025

this is what i added which provided the best solution:

        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-wrap": "wrap",
          "align-items": "center",
          "flex-direction": "row",
          "justify-content": "center"
        },

jstander

Brass Contributor

Mar 31, 2025

this is what i added which provided the best solution:

        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-wrap": "wrap",
          "align-items": "center",
          "flex-direction": "row",
          "justify-content": "center"
        },

WP
Iron Contributor
Mar 31, 2025
can you share a screenshot?
NathanRodriguez
Iron Contributor
Mar 29, 2025
Method 1: Use JSON formatting
Go to the list → switch to “Gallery view”
Click on the view dropdown menu → “Format current view”
Add vertical centering style in JSON editor:
json
{
“style": {
“display": ‘flex’,
“align-items": ‘center’,
“height": ”100%”
}
}
2. Custom CSS injection
via the Script Editor web part:
Add the “Script Editor” web part to the page
Insert the following CSS code:
css
.ms-ListGridTile .ms-ListGridTile-content {
display: flex !important; align-items: center !
justify-content: center !important; justify-content: center !important; justify-content: center !
justify-content: center !important;
}
3. Vertical alignment of multiple columns
Column formatting:
Modify the JSON format of the columns in the list settings:
json
{
“elmType": ‘div’,
“style": {
“display": ‘flex’, ‘flex-direction’: ‘column’, {
“flex-direction": ‘column’, ‘justify-content’.
“justify-content": ‘center’, ‘height’: ”100%
“height": ”100%”
}
}
4. Responsive Adaptation
Mobile compatible code:
css
media screen and (max-width: 640px) {
.ms-ListGridTile {
min-height: 120px !important;
}
}
5. Enterprise Deployment
This is achieved through the SPFx extension:
Create extension project and add CSS override:
typescript
require('. /styles.module.scss');
Define global styles in the .scss file

Forum Discussion

sharepoint list gallery view, center text vertically

Resources