Found the solution for the elements positioning a while ago. You need to enclose your elements into parent DIV with ccs set to display: block Then it works like a charm and the elements are below each other.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",

    "elmType": "div",
    "style":{
        "display":"block", // YOU NEED THIS IN THE PARENT ELEMENT
        "text-align":"center",
        "width":"100px"
    },
    "children": [
        {
            "elmType": "img",
            "attributes": {
                "src": "@thumbnail.medium" 
            },
            "style": {
                "max-height": "100px",
                "max-width": "100px",
                "display": "block",
                "margin": "auto"
              }
        },
        {
            "elmType": "div",
            "txtContent":"your text content goes here"
        }
    ]
}

Found the solution for the elements positioning a while ago. You need to enclose your elements into parent DIV with CSS set to display: block. Then it works like a charm and the elements are below each other.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",

    "elmType": "div",
    "style":{
        "display":"block", // YOU NEED THIS IN THE PARENT ELEMENT
        "text-align":"center",
        "width":"100px"
    },
    "children": [
        {
            "elmType": "img",
            "attributes": {
                "src": "@thumbnail.medium" 
            },
            "style": {
                "max-height": "100px",
                "max-width": "100px",
                "display": "block",
                "margin": "auto"
              }
        },
        {
            "elmType": "div",
            "txtContent":"your text content goes here"
        }
    ]
}