# How to centre an illustration

**URL:** <https://community.glideapps.com/t/how-to-centre-an-illustration/59575>\
**Category:** Ask for Help\
**Created:** [March 23, 2023, 1:47pm UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575 "2023-03-23T13:47:07Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [March 23, 2023, 1:47pm UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/1 "2023-03-23T13:47:07Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 24, 2023, 2:15am UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/2 "2023-03-24T02:15:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [March 24, 2023, 6:20am UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/3 "2023-03-24T06:20:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 24, 2023, 11:25pm UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/4 "2023-03-24T23:25:07Z")

</div>

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

You can try a template like this:

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

```

Then put that in a rich text component.

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [March 26, 2023, 10:14am UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/5 "2023-03-26T10:14:43Z")

</div>

> [@ThinhDinh](#):
>
> `<center><image src="your image link here"></image></center>`

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 26, 2023, 2:20pm UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/6 "2023-03-26T14:20:23Z")

</div>

Inline HTML should still be possible.

---

<div class="post-metadata">

**Author:** ![kabookie](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kabookie/32/10994_2.png) [@kabookie](https://community.glideapps.com/u/kabookie)\
**Post date:** [March 27, 2023, 12:57am UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/7 "2023-03-27T00:57:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 27, 2023, 1:06am UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/8 "2023-03-27T01:06:01Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/5/25d13a182b89fd6d68f63f03a15b99e836c8c5d9.png)

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

---

<div class="post-metadata">

**Author:** ![kabookie](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kabookie/32/10994_2.png) [@kabookie](https://community.glideapps.com/u/kabookie)\
**Post date:** [March 27, 2023, 2:26am UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/9 "2023-03-27T02:26:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [March 27, 2023, 3:35am UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/10 "2023-03-27T03:35:09Z")

</div>

Can you show your template?

---

<div class="post-metadata">

**Author:** ![kabookie](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kabookie/32/10994_2.png) [@kabookie](https://community.glideapps.com/u/kabookie)\
**Post date:** [March 27, 2023, 4:35am UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/11 "2023-03-27T04:35:22Z")

</div>

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

 ![CleanShot 2023-03-26 at 21.34.24@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/0/c00c9ec4e18a1c42dbb304630fc7e4461868c9cd.jpeg)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [March 27, 2023, 4:37am UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/12 "2023-03-27T04:37:27Z")

</div>

😉 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="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/sMGyeKcmmiWw86WtVUlT-template-builder/pub/GlFCDPIeYNjfH9CUfwpB.png"></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.

---

<div class="post-metadata">

**Author:** ![kabookie](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kabookie/32/10994_2.png) [@kabookie](https://community.glideapps.com/u/kabookie)\
**Post date:** [March 27, 2023, 4:48am UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/13 "2023-03-27T04:48:23Z")

</div>

> [@Uzo](#):
>

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)

 ![CleanShot 2023-03-26 at 21.44.30@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/9/498dd8240eeed3213ba989d420d90c657cb897b5.png)

 ![CleanShot 2023-03-26 at 21.47.33@2x](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/5/65e3cbf4f16fa3351da1f5b2668748e0af49ef93.png)

---

<div class="post-metadata">

**Author:** ![Xavier\_Delplanque](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/xavier_delplanque/32/45565_2.png) [@Xavier\_Delplanque](https://community.glideapps.com/u/Xavier_Delplanque)\
**Post date:** [March 27, 2023, 7:38am UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/14 "2023-03-27T07:38:26Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/a/7a5969db04522ad99c2ccc446e9d1f3ca9658a26.png)

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [March 27, 2023, 10:44am UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/15 "2023-03-27T10:44:35Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 27, 2023, 2:39pm UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/16 "2023-03-27T14:39:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![KPT](https://avatars.discourse-cdn.com/v4/letter/k/eb9ed0/32.png) [@KPT](https://community.glideapps.com/u/KPT)\
**Post date:** [March 27, 2023, 3:01pm UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/17 "2023-03-27T15:01:40Z")

</div>

> [@ThinhDinh](#):
>
> `<center><image src="your image link here"></image></center>`

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:

```auto
<center>
  <img src="URL" width="70%" style="border-radius: 50%;" 
</center>

```

---

<div class="post-metadata">

**Author:** ![kabookie](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kabookie/32/10994_2.png) [@kabookie](https://community.glideapps.com/u/kabookie)\
**Post date:** [March 27, 2023, 5:28pm UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/18 "2023-03-27T17:28:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 27, 2023, 11:53pm UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/19 "2023-03-27T23:53:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [March 28, 2023, 11:53pm UTC](https://community.glideapps.com/t/how-to-centre-an-illustration/59575/20 "2023-03-28T23:53:56Z")

</div>

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