# How to style template module

**URL:** <https://community.hubspot.com/t/how-to-style-template-module/52814>\
**Category:** CMS Development\
**Created:** [March 9, 2022, 3:25pm UTC](https://community.hubspot.com/t/how-to-style-template-module/52814 "2022-03-09T15:25:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![LHarney](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/lharney/32/21203_2.png) [@LHarney](https://community.hubspot.com/u/LHarney)\
**Post date:** [March 9, 2022, 3:25pm UTC](https://community.hubspot.com/t/how-to-style-template-module/52814/1 "2022-03-09T15:25:13Z")

</div>

Hi,

How can I edit the syle of an image in the dnd template image module?

I want to change the image alignment to center.

 ![Screenshot 2022-03-09 at 15.21.53.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/0/0da8fa11ae33e6556f9da498302ac48da28b7c4e.png)

This is what I have but it dosn’t work:

```lia-code-sample
{% dnd_module path='@hubspot/linked_image',
 img={
 'alt': 'Image alt',
 'loading': 'lazy',
 'size_type': 'auto',
 'max_height': 424,
 'max_width': 400,
 'src': get_asset_url('../images/client-name/landing-page-image.png'),
 },
 styles={
 "alignment": 'center'
 }
%}
{% end_dnd_module %}

```

Thanks,

Lar

---

<div class="post-metadata">

**Author:** ![AWagle](https://avatars.discourse-cdn.com/v4/letter/a/df788c/32.png) [@AWagle](https://community.hubspot.com/u/AWagle)\
**Post date:** [March 9, 2022, 3:35pm UTC](https://community.hubspot.com/t/how-to-style-template-module/52814/2 "2022-03-09T15:35:26Z")

</div>

Try to use text-align property to align image

---

<div class="post-metadata">

**Author:** ![DanielSanchez](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/danielsanchez/32/48193_2.png) [@DanielSanchez](https://community.hubspot.com/u/DanielSanchez)\
**Post date:** [March 10, 2022, 12:54pm UTC](https://community.hubspot.com/t/how-to-style-template-module/52814/3 "2022-03-10T12:54:45Z")

</div>

Hi @LHarney ,

If you are configuring this at the theme level, you will have to enter the alignment in the JSON of the column, not in the image module. This will assign the “column” to align its contents in the center, left or right.

Another way is to create your own image component with an alignment field, and then at the component level, define the image’s position. Then I would use text-align in this created component.

If you don’t need to configure the theme level, just click in the page editor (front) on the column that the image is in and adjust the list of content within it.

Did this post help solve your problem? If so, please mark it as a solution.

Best! 🙂