How to center the profile picture on my Sharepoint list gallery view card?

[Peki72]

Dear community,

I have a Sharepoint List in Gallery view with JSON-formatting. I have only one issue is that my profile picture isn't aligned center! Everything else is only not my profile picture.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": "300",
  "width": "300",
  "hideSelection": true,
  "formatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "align-items": "stretch",
      "margin-bottom": "16px",
      "min-width": "150px",
      "justify-content": "space-around",
      "padding": "5px"
    },
    "customRowAction": {
      "action": "defaultClick"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "95%",
          "height": "92%",
          "box-shadow": "0px 1.6px 3.6px 0 #00000024, 0px 0.3px 0.9px 0 #00000024",
          "overflow": "hidden",
          "border-radius": "2px",
          "padding-left": "16px",
          "padding-top": "16px"
        },
        "attributes": {
          "class": "ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "text-align": "center"
            },
            "children": [
              {
                "elmType": "div",
                "children": [
                  {
                    "elmType": "img",
                    "style": {
                      "display": "block",
                      "border-radius": "50%",
                      "margin-bottom": "25px",
                      "text-align": "center"
                    },
                    "attributes": {
                      "src": "=getUserImage([$FotoE.email], 'M')"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "text-align": "center"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "color": "#333333",
                      "font-size": "16px",
                      "font-weight": "600"
                    },
                    "txtContent": "[$field_1]"
                  },
ETC..

[#2 · Accepted solution]

@Peki72 Try removing the "display": "block" styling added for your img element in the JSON.

Here's the working JSON in my case without display styling for the img element: 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 150,
  "width": 254,
  "hideSelection": false,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "style": {
      "text-align": "center"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "sp-card-defaultClickButton"
        },
        "customRowAction": {
          "action": "defaultClick"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "style": {
              "text-align": "center"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                  "role": "heading",
                  "aria-level": "3"
                },
                "style": {
                  "text-align": "center"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "style": {
              "text-align": "center"
            },
            "children": [
              {
                "elmType": "div",
                "children": [
                  {
                    "elmType": "img",
                    "style": {
                      "border-radius": "50%",
                      "margin-bottom": "25px",
                      "text-align": "center"
                    },
                    "attributes": {
                      "src": "=getUserImage([$PersonColumn.email], 'M')"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Output: 

---

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.