How to center image inside panel

[Waleed]

I am trying to center image inside panel, but this  doesn't work no matter how I try

   var y = new PanelModel();
            if (stringo != string.Empty)
            {
                y = new PanelModel()
                {
                    Content = "<div style=\"text-align: center; vertical-align: middle; align-content: center; align-items: center; align\"> <img style=\"border:1px solid black;\" src=\"data:image/png;base64," + stringo + "\"></>",
                    SizeX = 1,
                    SizeY = 1
                };
            }
            DashboardObj.AddPanel(y);
            StateHasChanged();

[Sowmiya Padmanaban]

Hi Waleed, 

  

Thanks for contacting Syncfusion support. 

  

We have checked your reported query that image does not align center in  dashboard layout panel. You can add the below CSS style to align the image tag center in dashboard layout panel. 

 

Refer the below code snippet. 

#image { 

       height: 100%; 

       width: 100%; 

       justify-content: center; 

       display: flex; 

       align-items: center; 

    } 

 

 

For your reference, we have prepared a sample. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp132410259.zip 

 

Please let us know, if you have any concerns. 

  

  

Regards, 

Sowmiya.P