Centering all images on a page

11 posts from 2 voices

• Started 1 year ago by nugent44
• Latest reply from Dude
• This topic is not a support question

Tags:

No tags yet.

1. 

   nugent44
   Member

   What is the best way to center all images on a page? In the past we have used the text align feature to center all content however we only want the images centered. I know it's possible to go into each image but is there a better way to center all images at once? We have 20-30 images scrolling down some pages.

   Thanks

   Posted 1 year ago #
2. 

   Dude
   Dude

   Hey,
   can you post a link please - I can give you custom css code afterwards :)

   Posted 1 year ago #
3. 

   nugent44
   Member

   Thanks so much! Yeah I guess on the portfolio page it looks like it has been set up to leave space for a sidebar, but we really want the gallery of photos centered in the middle of page. Here's the link:

   http://altd.dev.amermancreative.com/egyptian-arabian-horses-for-sale

   Posted 1 year ago #
4. 

   Dude
   Dude

   I thought you refer to standard images but in your case it's the portfolio page. I'm not sure if it's possible to center align the images - the only soluttion I can imagine is to use following code in style.css:
   

   #top .portfolio_entry .one_fourth{
   left: 104px !important;
   }
   
   #top .portfolio_entry .one_fourth.last{
   left: 475px  !important;
   }

   I'm not sure if it works. The code will break all 4 columns portfolios which use a different layout/style like: http://altd.dev.amermancreative.com/egyptian-arabian-horses-for-sale

   Posted 1 year ago #
5. 

   nugent44
   Member

   Hey thanks! That actually did work, which is great! Only thing I'm seeing is the right column image cut off and slight jump when the page first loads. Any ideas what's causing the jump?

   I appreciate the help!
   http://altd.dev.amermancreative.com/egyptian-arabian-horses-for-sale

   Posted 1 year ago #
6. 

   Dude
   Dude

   Hey,
   try following code to fix the problem:
   

   #top .portfolio_entry .one_fourth{
   left: 104px !important;
   position: absolute;
   }
   
   #top .portfolio_entry .one_fourth.last{
   left: 475px  !important;
   position: absolute;
   }

   Posted 1 year ago #
7. 

   nugent44
   Member

   Thanks, that didn't seem to work. It might not be a big deal, just thought I'd see if there was a way to avoid it.

   Posted 1 year ago #
8. 

   Dude
   Dude

   Obviously the problem is how the portfolio works. By default the items are aligned/positioned relative to each other. The portfolio js converts the relative positions to absolute positions and you can notice when the js function kicks in. By changing the position to absolute by default you shouldn't notice the js function but it doesn't seem to work out...

   Posted 1 year ago #
9. 

   nugent44
   Member

   Okay that makes sense. I might just live with it because the client wants it centered. Although it seems to be applying to the slideshow on the mainpage too which looks weird. Is there an easy way to avoid applying it to the main page?

   Posted 1 year ago #
10. 

    nugent44
    Member

    http://altd.dev.amermancreative.com/

    Posted 1 year ago #
11. 

    Dude
    Dude

    No it's not caused by the code I posted above - in style1.css you can find:
    

    img {
       padding:40px;
       border:1px solid #6c6c6c;
       background-color: transparent;
    }

    Change it to:
    

    img {
       padding:0px;
       border:1px solid #6c6c6c;
       background-color: transparent;
    }

    or:
    

    img {
       padding:40px;
       border:1px solid #6c6c6c;
       background-color: transparent;
    }
    
    .featured img {
       padding:0px;
    }

    If you need the padding elsewhere.

    Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.