Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #5404

    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

    #50067

    Hey,

    can you post a link please – I can give you custom css code afterwards :)

    #50068

    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

    #50069

    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

    #50070

    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

    #50071

    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;
    }

    #50072

    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.

    #50073

    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…

    #50074

    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?

    #50075
    #50076

    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.

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Centering all images on a page’ is closed to new replies.