Forums

How to centre image in middle of page ( please help ) thanks

Permalink
Hi all,

I know this question has been asked a dozen times. But for the life of me I can not figure out how to centre an image ( in block ) at the top of my screen. I have a attached a brief screen recording and the website address ishttp://www.melangecounselling.com Any feedback would be great as Ive struggled with this now for a while

THANKS !!!!!!

1 Attachment

melange
 
Area55 replied on at Permalink Reply
If you use a content block and add an image, you have an align option. Alternatively, you could give the image or block a custom class and center with CSS.
Design & custom template > Settings Cog.

Hope this helps
melange replied on at Permalink Reply
melange
Thanks Area55,

I found that helpful and I am sure it will serve me well with further building of the site.
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi melange,

Images in your theme are displayed as inline-block elements. Inline-block elements can be centered if their parent has the text-align property set to center.

You can try this:
- click on the Image block
- from the popup menu, choose Design & Custom Template
- from the Design toolbar, click the "A" icon (Text Size and Color)
- in the Text Size and Color panel, under Alignment, choose "Center" from the select drop-down
melange replied on at Permalink Reply
melange
MrKDilkington ,

That was the solution that I have overlooked. This is very new to me and not my day job building web-sites. I do have a follow up question which does relate to positioning that this thread might be able to assist with. If not please advise I may post another thread If I can not resolve myself. I will post this soon. Most appreciated Mr.K .. as I spent along time trying to figure this one out.

Kind Regards
Darren
MrKDilkington replied on at Permalink Reply
MrKDilkington
@melange

What is the question?
melange replied on at Permalink Reply 1 Attachment
melange
Hi MrKDilkington,

Hi again.

This issue is also about image/block positions. I do apologize for some terms I may use at they may be out of context in the way I use some terms , untill I learn Concrete5 (C5 )more.

To the issue: I have a block/image that shows in the admin console as centered to the page. However when the page is published the block/image is located on the far left of the page. Ill attach images . the url ishttp://www.melangecounselling.com

Thanks all
Darren
MrKDilkington replied on at Permalink Reply
MrKDilkington
@melange

You can add this to your site Custom CSS:
Toolbar > Page Settings (gear icon) > Design > Theme > Customize > Custom CSS gear icon button
.ccm-page .column, 
.ccm-page .columns {
    min-height: 1px;
}

Make Sure Your Columns Don’t Collapse Horizontally
https://css-tricks.com/make-sure-columns-dont-collapse-horizontally/...

Zurb Foundation: Prevent empty column collapsing to zero width
http://stackoverflow.com/questions/23569705/zurb-foundation-prevent...
melange replied on at Permalink Reply 1 Attachment
melange
Hi Mr Dilkington,

I have the same issue at before : Re centre image in block. The previous solution that I used you provided:

click on the Image block
- from the popup menu, choose Design & Custom Template
- from the Design toolbar, click the "A" icon (Text Size and Color)
- in the Text Size and Color panel, under Alignment, choose "Center" from the select drop-down

In this case has not worked . I do not see why it would be any different in this case using the image I have ( attached ) ... Any feedback on how I would centre this one would be great.

Thanks
Darren
MrKDilkington replied on at Permalink Reply
MrKDilkington
@melange

The logo icon appears to be centered on your website.
melange replied on at Permalink Reply
melange
@MrKDilkington

Yes you are correct. What happens it when I make the change in the editor to move the image e.g center, right, left , top etc. The image in the editor does not move, it stays on the left. I did not actually check the actually live website.

Thanks