Image block won't center

Permalink Browser Info Environment
I have a set of layout cells in which I've added a single image (using the image block type) to each layout cell. Since I want the images centered in each cell, I added text-align: center; to the custom CSS tab of the design for each cell. Up until today, this was working great. Today, I logged in and upgraded supermint to the latest rev and these images are now left justified. How can I center the images within in their respective layout cells?

Tx,
Henry

Type: Discussion
Status: In Progress
View Replies:
Solarnomics replied on at Permalink Reply
I have a similar problem since the update, all my images that where centered within a block could no longer be centered after the upgrade. I sent an email to Seb explaining this. In the meantime, I put a 1 cell table in each block and in there placed my image.

Hope this helps,
-d-
sebastienj replied on at Permalink Reply
sebastienj
Hi,

This is interesting. Can you provide me a url to understand which code make this ?
Solarnomics replied on at Permalink Reply

Sure thing Seb! Go to:http://www.arssoutheast.com the side bar images are now in a
table as well as the logo images in the mainbody on the About page and on
othere pages where images were centered in the mainbody.

-----Original Message-----
From: concrete5 Community [mailto:[email protected]]
Sent: Wednesday, May 21, 2014 2:13 PM
To: [email protected]
Subject: Image block won't center : Forums
HenryLach replied on at Permalink Reply
Here's a page that has the problem.

http://emailtop.wwwss8.a2hosting.com/products/emailgistics-connect/...

Look for the gift bag with mouse picture halfway down the page. Looking a the CSS it appears that the img element is being set with display: block;. If you turn that off it works like it used to. You'll see for the product menu images at the top of the page, I assigned a custom theme override forcing img to display: inline !important; That kind of works, but it's not ideal.

It was much simpler just adding text-align: center; to the Image block.

Henry
sebastienj replied on at Permalink Reply
sebastienj
Thank you. It works on this url. Did you have a url where isn't work ?
Solarnomics replied on at Permalink Reply
OK, I took the table out and re-added the image with the CENTERED attribute.
http://www.arssoutheast.com/about/...


-----Original Message-----
From: concrete5 Community [mailto:[email protected]]
Sent: Wednesday, May 21, 2014 2:59 PM
To: [email protected]
Subject: Image block won't center : Forums
sebastienj replied on at Permalink Reply
sebastienj
Hi,

In fact the img loose the centered position because of a css rule : display:block.
This rule is mandatory for responsive behavior. To avoid that we need to set this rule
img {
display:inline;
}
but in this way we loose the responsive behavior.
HenryLach replied on at Permalink Reply
So 2 questions:
1) What changed in the last Supermint update to stop the text-align: center; on the containing div method from working?
2) What's the correct strategy for centering an Image in a Image block. Just to be clear, I'm specifically using an Image block rather than a Content block with an IMG because I'm under the impression that the Image block nicely handles responsiveness (including auto scaling).

I really appreciate your help with this as I'm trying to launch the site, and this issue is slowing me down a lot.

Tx,
Henry
Solarnomics replied on at Permalink Reply
So are you saying in order for those using the SuperMint theme to center
images that we need to add our images to tables from now on? Or, add a
display:inline to the CSS - where in the CSS would we add that line?

My perception is all this worked before the last update.

Thanks for your help,
-Dave

-----Original Message-----
From: concrete5 Community [mailto:[email protected]]
Sent: Thursday, May 22, 2014 3:05 AM
To: [email protected]
Subject: Image block won't center : Forums
sebastienj replied on at Permalink Reply
sebastienj
I has fixed this on the last release, just update and normaly, all will be working as before.
HenryLach replied on at Permalink Reply
Awesome!!! I've updated and all is happy again. Tx Seb.
Solarnomics replied on at Permalink Reply
Seb, I updated but my images still want to be left aligned . You can see the
onhttp://www.arssoutheast.com/about I've cleared the cache and re-edited the block
but the problem persists. Any ideas?

Thanks,
-Dave

-----Original Message-----
From: concrete5 Community [mailto:[email protected]]
Sent: Thursday, May 22, 2014 10:57 AM
To: [email protected]
Subject: Image block won't center : Forums
MAKG replied on at Permalink Reply
MAKG
The following worked for me: Create a template for image block, copy view.php to it and change line:
$tag->addClass('ccm-image-block img-responsive bID-'.$bID);

to
$tag->addClass('center-block ccm-image-block img-responsive bID-'.$bID);

so it's just to simply add the 'center-block' class to the image output div. That's it if you're using bootstrap. If not add this class to your css file:
.center-block {
display: block;
margin-right: auto;
margin-left: auto
}
Lashes replied on at Permalink Reply
This worked beautifully for me - thank you!

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.