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
Tx,
Henry
Type: | Discussion |
---|---|
Status: | In Progress |
Hi,
This is interesting. Can you provide me a url to understand which code make this ?
This is interesting. Can you provide me a url to understand which code make this ?
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:discussions@concretecms.com]
Sent: Wednesday, May 21, 2014 2:13 PM
To: david@ballsmachine.com
Subject: Image block won't center : Forums
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
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
Thank you. It works on this url. Did you have a url where isn't work ?
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:discussions@concretecms.com]
Sent: Wednesday, May 21, 2014 2:59 PM
To: david@ballsmachine.com
Subject: Image block won't center : Forums
http://www.arssoutheast.com/about/...
-----Original Message-----
From: concrete5 Community [mailto:discussions@concretecms.com]
Sent: Wednesday, May 21, 2014 2:59 PM
To: david@ballsmachine.com
Subject: Image block won't center : Forums
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.
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.
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
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
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:discussions@concretecms.com]
Sent: Thursday, May 22, 2014 3:05 AM
To: david@ballsmachine.com
Subject: Image block won't center : Forums
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:discussions@concretecms.com]
Sent: Thursday, May 22, 2014 3:05 AM
To: david@ballsmachine.com
Subject: Image block won't center : Forums
I has fixed this on the last release, just update and normaly, all will be working as before.
Awesome!!! I've updated and all is happy again. Tx Seb.
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:discussions@concretecms.com]
Sent: Thursday, May 22, 2014 10:57 AM
To: david@ballsmachine.com
Subject: Image block won't center : Forums
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:discussions@concretecms.com]
Sent: Thursday, May 22, 2014 10:57 AM
To: david@ballsmachine.com
Subject: Image block won't center : Forums
The following worked for me: Create a template for image block, copy view.php to it and change line:
to
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
}
$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
}
This worked beautifully for me - thank you!
Hope this helps,
-d-