Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Centering Images help

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #38150
    kennethk
    Member

    Need a bit of help, I have two images here they are centering but I’m trying to get them besides each other. Heres what I have.

    .img {

    margin-left: auto;
    margin-right: auto;
    width: 8em;



    }

    And the HTML…








    #103154

    Replace:

    .img {
    margin-left: auto;
    margin-right: auto;
    width: 8em;
    }

    with:

    .img {
    text-align: center;
    }‚Äč

    Then, if you want to adjust their vertical alignment, you can do so with the vertical-align property:

    .img img {
    vertical-align: middle; /* bottom, top, or any of the other options */
    }
    #103158
    chrisburton
    Participant

    @joshuanhibbert Question: What about when you have an unknown height and width and want to set an image vertically/horizontally center dynamically?

    I apologize for the hijack

    #103159

    @ChristopherBurton I generally use one of the techniques here: https://css-tricks.com/centering-in-the-unknown/

    The upside is that you don’t need to use any extra markup, the downside is that it won’t work in IE7.

    #103160
    chrisburton
    Participant

    @joshuanhibbert Thanks. Too bad I need a jQuery solution.

    I found this

    jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) +
    $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) +
    $(window).scrollLeft() + "px");
    return this;
    }

    // Now we can just write:

    $(element).center();

    Solved: Result

    #103161

    Ah, right. I did something similar a while ago that might be worth looking at: http://jsfiddle.net/joshnh/Ff5hm/

    It’s not as flexible as what you are currently using, but it is less code for a single image.

    #103165
    chrisburton
    Participant

    @joshuanhibbert Actually that worked perfect. Thanks again.

    #103167

    @ChristopherBurton No worries!

    #103201
    kennethk
    Member

    Thank you for the quick help and reply!

    #103203
    noahgelman
    Participant

    How about this? No js needed. Moves re-centers dynamically when re-sized.
    http://jsfiddle.net/joshnh/Ff5hm/

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.