Center align my large photos, without a negative margin

Question

I created a tumblr theme, where everything is centered and 660px wide.

However, I also post large imagery that is 940px wide, and have been centering that by giving it a negative margin of -140px (940-660/2), but this is not ideal because I then have to post all images as this dimension, or they are just aligned way left.

Scroll to the bottom of my site to see the images that are not aligned properly: http://seans.ws

The css:

        section {display: block; clear: both; margin: 0 auto;width: 660px;}

        article img {clear: both; max-width: 940px; margin-left: -140px;}

Thanks for any help!

Look into using javascript to dynamically position elements. — Travis J, Jul 01 '12 at 19:40

biziclop · Accepted Answer · 2012-07-01T20:26:56.557

1

You can choose between these two solutions:

Markup:

<div id="content">
  <div class="a"><div class="b">
    <img src="http://placekitten.com/100/100">
  </div></div>
  <div class="a"><div class="b">
    <img src="http://placekitten.com/2000/100">
  </div></div>

Common css:

#content {
    width: 300px;
    margin: 0 auto;
    border: 1px solid blue;
}
.a {
    /* extend image area */
    margin-left :-9999px;
    margin-right:-9999px;
    /* but without scrollbars */
    position: relative;
    left: -9999px;
}
.a .b {
    /* undo scrollbar-removing positioning */
    position: relative;
    left: 9999px;
}

The display: table way:

http://jsfiddle.net/ZhEku/3/

.a .b {
    display: table;  /* shrink-wrap to content (= the image) */
    width:   300px;  /* content width, acts as min-width when display:table */
    margin:  0 auto; /* center inside the (2*9999+300)px area */
}

The display: inline-block way:

http://jsfiddle.net/ZhEku/4/

.a {
    /* center content (= the image wrapped into .b) */
    text-align: center;
}
.a .b {
    display:    inline-block; /* shrink-wrap to content (= the image) */
    min-width:  300px;        /* content width */
    text-align: left;         /* if image is smaller than the content */
}

Enjoy :)

edited Jul 01 '12 at 20:26

answered Jul 01 '12 at 19:41

biziclop

14,466
3
49
65

Okay, it isn't really perfect because it adds a looong horizontal scrollbar to the page. – biziclop Jul 01 '12 at 19:49
Yeah, and it then does not align the images that are smaller than the width specified in #content (like an image that is 200px won't left align flush with the red line I have at the beginning of each post /graphic designer geek ;) Thank you though Biziclop! – Sean Thompson Jul 01 '12 at 19:58
How much "unnecessary" markup are you ready to tolerate for this effect? :) – biziclop Jul 01 '12 at 20:03
haha, bring it on! I could also just take care of the smaller images by just targeting images that are 940px wide with my negative margin in JavaScript right? I can always just always post imagery that is always 940px wide going forward :) – Sean Thompson Jul 01 '12 at 20:09
Hi, I updated my answer. You have to wrap each independent image into two divs. – biziclop Jul 01 '12 at 20:29
1

Whoa :) Thanks...this place is so awesome. – Sean Thompson Jul 01 '12 at 20:47
Wooo! Thanks Biziclop. This works so much better than the jQuery I was trying. Check it out: http://seans.ws :) – Sean Thompson Jul 01 '12 at 23:29
Quick test: IE7: large images are aligned to red. IE8: some images are ok, some images with the same images are shifted too left + throws some JS errors. – biziclop Jul 01 '12 at 23:45
My suggestions: **1** add `.a .b { max-width: 940px; }` to fix IE layout shifts **2** use the `inline-block` variant for ie7 support. – biziclop Jul 02 '12 at 00:07

Sean Thompson · Answer 2 · 2012-07-01T21:05:48.380

Here's the infinite scroll js: http://static.tumblr.com/q0etgkr/ytzm5f1ke/infinitescrolling.js

Here is my margin-left script for images larger than the default width of containers:

    <!--Dynamicaly center big images-->
    <script>
    $(window).load(function() {
        $(function() {
            $('img').css('marginLeft', function(index, value){
                if($(this).width() > 660) {
                    return -($(this).width() - 660)/2;
                }
                return value;
            });
        });
    });
    </script>

The only thing I need to figure out is how to do this same function on images that dynamically load because I have infinite scroll (like the bottom images are not loaded until you go down the page.

If you fixed an image, add some class to it, like `.fixed-margin`. When a new bunch of image loads, just fix `img:not(.fixed-margin)`. Or you could listen to the `DOMNodeInserted` or some similar event: http://stackoverflow.com/questions/2143929/domnodeinserted-equivalent-in-ie — biziclop, Jul 01 '12 at 20:49

Center align my large photos, without a negative margin

2 Answers2