Jump to content

Center align images in product description


thetroon

Recommended Posts

Hi everyone,
I am struggling to understand how I can make my images in the "Product description" (long one) to be in the centre of the website. I am using the free theme provided by PS, so if I simply put my image in the long description, it will be to the far left (as any text or image would normally be unless you do something to change that). So it would look like the attached image called "normal", all the images are to the far left side.

However I think it looks strange to have the images to the far left, and in the areas where I have two images after each other, I would want them to be next to each other and in the centre instead, see the attached imaged called "Want".

So basically the images should be in the centre, and I have tried many different things such as simply choosing "Align center" in the toolbox, but nothing happens when clicking this one. I have tried to put a fixed number of cm for aligning the pictures in the source code (that is how I succeded to make the setting which you see in the attached image "Want"), however if I fix the number, to 10 cm for example, then when I resize the browser, the images will again be all over the place (see attached image "Resizing"). 

So my question is, how can I have the images in the centre? I feel like they should already be in the center since the source code for the alignment shows auto, however I think it is because the size of the "editing" box for long descriptions is different from the actual maximum size of a browser (if you get my logic..). When in editing mode, the box to put the long descriptions is actually quite small and narrow, however the actual size of "More info" for a product description in my browser goes all the way from left to right.

Thank you for any help or suggestions! And sorry for the amateur-like blurring of the pictures, did it in a hurry.

 

post-1267960-0-15946800-1465182312_thumb.jpg

post-1267960-0-02897800-1465182324_thumb.jpg

post-1267960-0-35081500-1465182340_thumb.jpeg

Link to comment
Share on other sites

Can you share an example of broken page so we can inspect the code? It should work with the align center one, as far as I know. You might want to disable the html purifier library from preferences, just in case

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

I can confirm that disabling HTML Purifier in Preferences has solved the centering issue.

Topic should be marked as solved.

Thanks @NemoPS

My apologies for not replying earlier, however I had a hard time to locate this thread after posting it (it disappeared from the list and notifications, but you commenting on it again made it able for me to find it). 

 

My issue was simple, when centering the image, I had to make a blank space or press enter above and underneath the image, this would allow for the center function to work properly. If I had text above or under, I had to make space between the image and the text, and the image would be centered (not the text). 

My apologies for not replying earlier, however I had a hard time to locate this thread after posting it (it disappeared from the list and notifications, but you commenting on it again made it able for me to find it). 

 

My issue was simple, when centering the image, I had to make a blank space or press enter above and underneath the image, this would allow for the center function to work properly. If I had text above or under, I had to make space between the image and the text, and the image would be centered (not the text). 

So to clarify, now it works (and it always worked), just that the image needed to be separated from any other paragraphs which were underneath or above.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...