Hola! ¡Tenemos nuestra Comunidad en Español!

Centering an image

SOLVE
Occasional Contributor

I have an image located on a landing page.  In all the previews EXCEPT desktop computer, the image centers itself.   On the desktop it pulls to the left. (Wording below it in a one-line module is centered.  They both need to be centered!)

 

I inherited all of my hubspot templates from someone who was previously working on them.  When I work on my email newsletters, I can access the html by a drop down in the "styles" section of the modules.  I've been able to fix a lot of the glitches that were in the email template by accessing the coding.

 

In this image module, "styles" only opens padding and margin options.  How do I tell this image to center?

 

I'm hoping this is just something very simple, but I am at a loss to find it, and I'm also frustrated that when I type in "center an image" either here in the community OR on the HubSpot help pages when I'm working within the page editing areas, NOTHING comes up!

1 Accepted solution

Accepted Solutions
Occasional Contributor

@Jsum,

 

It still wouldn't cooperate, so I just decided to delete the image block from the template altogether.  I then opened the text block that had been beneath it, imported the image into the beginning of the text block, and told it to center.  Problem solved. (I wish the "easy way" would come into my brain sooner!)

 

Thank you, however, for your help!  It's nice to know there are helpful souls out there.

Reply
0 Upvotes
8 Replies
Esteemed Advisor

@Gail Could you share a link to the page? I couldn't be sure without looking at it but it is possible that there is a min-width media query applying an unwanted set of styling to the image at desktop size, or a max--width media query applying the wanted styling to any screen smaller than desktop. Share a link and I can debug it for you.

- Jonathan Sumner
Reply
0 Upvotes
Occasional Contributor

@Jsum still in early design stage! (Super early, as you can see).  If image is set to "small" or "medium", it pulls to the left.  "Large" seems to center in the preview, but because it is "large"...it may just be filling the page.

Also, when "medium" is chosen, it also defaults to "full".

I really don't want the picture to go "large" because it blurs and pixelates.

Hopefully this preview link will work, as the page is not published due to being in the design stage.

http://www.globemachine.com/-temporary-slug-49c9ce45-945a-4baa-ab57-6bd6b0a10bc6?hs_preview=qIMUFPLm...

Esteemed Advisor

@Gail ok your images is set to width of 640px inline (applied by hubspot) and a max-width of 100%.

 

This means that the image can be 640px wide as long as that does not exceed 100% of it's container (in this case the container with the class of content-wrapper).

 

The reason that it looks centered  on smaller devices is because these device windows are smaller than 640px so the image's width defaults to 100% of the container. 

 

You can apply this css:

display: block;
margin: 0 auto;

To the image and it will cause the image element to be considered a block element by the browser. now that it is block, using auto for the left and right margin will cause the image to automatically have an equal left and right margin, thus it will center. 

 

You don't have to worry about width control here because the image already has a width of 640px and a max-width of 100%.

- Jonathan Sumner
Reply
0 Upvotes
Occasional Contributor

@Jsum,

 

It still wouldn't cooperate, so I just decided to delete the image block from the template altogether.  I then opened the text block that had been beneath it, imported the image into the beginning of the text block, and told it to center.  Problem solved. (I wish the "easy way" would come into my brain sooner!)

 

Thank you, however, for your help!  It's nice to know there are helpful souls out there.

Reply
0 Upvotes
Regular Contributor

I've been running into the same issue too. Seems like it would be a quick fix in the module settings to center the image.

Esteemed Advisor

@aarongarcia1,

 

By default browsers treat images as inline elements. I could write a short book on the difference between inline elements and block elements, but the difference that pertains to this conversation is that you can't simply center an inline element. 

 

Inline elements are treated like text. In order to center text you have to apply "text-align:center;" to it's parent, such as a div or a p tag. You can't target text directly using css but if you could such as the letter "a" in a sentance, "apples are good", and you applied text align center to that "a" it wouldn't do anything. The same rule applies to images displayed inline. You can't really set it to display center directly, you have to target it's parent with "text-align: center;" for an inline image to center. If you image is in a rich text module then using highlighting it and centering it using the toolbar will work by default.

 

Block elements fill the full width of the area that is available to them, they stack, and they are able to take on positional and sizing properties with more authority. You wouldn't use text-align to center a block element because it is a block element not inline, but you can still center it directly using "margin: 0 auto;" where the left and right margin are set to auto.

 

Once you set an element to block you lose inline characteristics. In order for Hubspot to provide the option to center images, they would need to either:

 

1. Assume all image elements are block, which would cancel inline characteristics that you would most likely miss in most situations.

 

2. Add controls to the image module that effect it's parent, not the image itself. These seams like it wouldn't be that much of a challenge but I would imagine has large bug potential otherwise they would have implemented this already. Maybe you should suggest it in the idea forum.

Either way, when dealing with any CMS you get a certain amount of basic functionality from what they provide. If they attempted to cater to every possibility and challenge then Hubspot would still be in beta and would never be production ready. The internet is a poorly planned and very messy place. 

That being said, it really isn't very difficult to change an elements display option from inline, to inline-block, to block in order to do what you want using css. If it is a situation that you run into a lot then it might be worth hiring a developer to write you some boilerplate css for your page/email that you can use to quickly set things the way you would like them to be. It should be faily inexpensive and save you a lot of headaches.

- Jonathan Sumner
Regular Contributor

@Jsum 

 

I am completely having the same issue as Gail and being my perfectionistic self, not willing to just do a text align or use a rich text module to center the image.

 

I somehow didn't understand Gail and I were having the same issue when I first read this post, but it was so , so wonderful to read tonight. I also thought that obviously there must be a simple fix to not have an image be left-aligned.

 

I had also tried adding inline CSS to display the image as a block which doesn't appear to work. I also tried to add it to the attached stylesheet as a custom class and no dice. I've tried margin: auto, margin: 0 auto (as you suggested above), margin-left: auto; margin-right; auto. Nothing works. I still feel somewhat crazy because obviously I cannot be the only person at Hubspot who wanted to center their image.

 

Anyways, if you take a look at my thread let me know if you have any additional thoughts. I posted a link to my page there as well.

Highlighted
Regular Contributor

Yup, this is still a pain. Why can't we center our images, Hubspot?