Question

我创建了一个tumblr主题，其中所有内容都居中，宽度为660px。

然而，我还发布了940px宽的大图像，并且通过给它-140px（940-660 / 2）的负边距进行了居中，但这并不理想，因为我必须发布所有图像作为这个维度，或者它们只是左对齐。

滚动到我的网站底部，查看未正确对齐的图片：http://seans.ws

css：

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

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

感谢您的帮助！

Answer 1

您可以选择以下两种解决方案：

标记：

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

display: table方式：

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 */
}

display: inline-block方式：

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 */
}

享受：）

Answer 2

这是无限滚动js：http://static.tumblr.com/q0etgkr/ytzm5f1ke/infinitescrolling.js

这是我的margin-left脚本，用于大于容器默认宽度的图像：

    <!--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>

我唯一需要弄清楚的是如何在动态加载的图像上执行相同的功能，因为我有无限滚动（就像你下到页面之前没有加载底部图像。

中心对齐我的大照片，没有负边距

2 个答案: