How to centre an illustration

This seems like very obvious, but i can for some reason not centre an illustration.
I have a welcome page where I have an illustration I’ll like to centre - how do I do that without just setting it to fill?

Can you show some illustration on what you want to achieve? Are you on Glide Apps or Classic Apps?

1 Like

I’m on glide apps. It’s a small illustrations for empty states and different welcome page/explainer pages to encourage users to do something.

So you have an image and you want to center it on the screen?

You can try a template like this:

<center><image src="your image link here"></image></center>

Then put that in a rich text component.

1 Like

Ahh nice - somehow thought that the HTML markup, was also not possible along the CSS.

1 Like

Inline HTML should still be possible.

I don’t see how this works as when I add the link to the Rich Text, the image fills the entire screen width, so there is no centering of the image. I tried to pull the image link and then add to a template column and the same result.

Depends on what size of image you have, I think. You can always resize it within HTML using the width/height attributes.

It is working for me (an image of a loading GIF).

I can get it to work if I manually plug the link right into the richtext element, but I can’t seem to get it to work with any kind of template/column element so that the image link can be dynamic.

Can you show your template?

I think I have it right but this is not where my skills are…

:wink: your image dimensions are wrong… you need to define it… ie: the width:100px; height:100px

Try this:

<center><image style="height:100px;width:400px" src=""></image></center>

replace image URL with XYZ

you can use %, vw, vh instead of px to better suit your proportions

but % will not work on height… if you want to keep the image’s original proportions… don’t use height.


Thank you @Uzo ! This is how the template looks now, with XYZ as the replacement column:
When I use 100x400 it stretches this square image, but 100x100 gets me there. (colored container background for clarity)

1 Like

Another solution is to use the Title component for empty states :

1 Like

aaahhhhh very nice - just what I was looking for. Going from apps to pages, still takes a little time to get used to… Actually, just checkking it out I don’t think the tittle component with the round image exists anylonger?

Maybe container > 3 columns, use the central one will help you get something similar.

1 Like

It was more to get a round image however I figured it out with the HTML.

If anyone else needs this is what I used:

  <img src="URL" width="70%" style="border-radius: 50%;" 

The problem with container columns is that on mobile they really don’t work. I’m not sure why and hoping a fix in in the works

Well, no good workaround for that at the moment. Responsiveness is one of the hardest things when building apps.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.