Converting image module to display as a block

[marianberry]

Hi all-

Working on my practicum for the Hubspot Design Cert and feeling like a dummy. I am trying to get and image centered in the image module on my page, and when I attempted to add CSS that would make the image display as a block and then auto-align right and left from there, nothing. However, I then told it to text-align: center and voila, the image is centered.

Does HS not allow the image module to display as a block if you edit the CSS declarations? I *think* I'm entering the code right, but here is a screenshot for reference.

[roisinkirby]

Hey @marianberry are you still experiencing this issue? This wouldn't be my area expertise, but I'll tag some of our resident experts for their input 🙂

@benvanlooy, @EricSalvi, @Josh

[marianberry]

@roisinkirby! Thank you so much for caring. I was hoping I wasn't just a baffoon, but after coming back to this on a few occassions, I still have yet to solve this one. I'll repond to @benvanlooy below now and see if we can figure out my issue.

[benvanlooy]

Hi Marian,

The inline css is meant for real inline css, not for defining classes.

To center, you could add inline css for the image (if that's an option), set it to " margin:auto " .

Is it possible to show us a preview link of what you have?

It's always easier to see the code and help 🙂

[marianberry]

@benvanlooy

Thank you so much for your suggestion and response.

Okay I published the page:

http://example-4262163.hs-sites.com/oregon-recycling-info

And now that I published the page, I have another question. I can't see any of my CSS (from an attached stylesheet) in the head, but I tested some of it out and it is working.

Presently, I have tried your suggestion both in the image module and in the attached CSS sheet and it has no effect on the image.

Thank you so much for taking the time to respond. (Screenshot of the stylesheet below.)

adding margin:auto to the inline styling for the image blockcreating a custom class using margin: auto in the stylesheet. Applying the class in the module block did not do anything.

[marianberry]

Hey @benvanlooy, did you ever get a chance to check this out? 

[marianberry]

@benvanlooy and @roisinkirby, stay with me.....drumroll....

https://knowledge.hubspot.com/articles/kcs_article/email/how-do-i-center-an-image-cta-or-logo-in-an-...

Can I safely assume the same holds true on page templates?

[benvanlooy]

it should work on page templates also 😉

[marianberry]

Thanks @benvanlooy! I think my comment may have been misunderstood. I was more interested to learn why I couldn't center my image by using the converting it into a block, but essentially the link I just sent through instructs users to use the align-text: center command in order to center an image in an email.

Sooooo.....any thoughts? I think I'll just go ahead and submit this practicum and make a note when I submit it to the HS reviewers. I'm assuming based on my research that for whatever reason, converting images to a block is not allowed.