We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to center image inside panel

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();

1 Reply

SP Sowmiya Padmanaban Syncfusion Team November 11, 2019 03:22 AM

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. 
 
Please let us know, if you have any concerns. 
  
  
Regards, 
Sowmiya.P 


Loader.
Live Chat Icon For mobile
Up arrow icon