0

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

但是，我还发布了 940 像素宽的大图像，并且通过给它一个负边距 -140 像素（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;}

谢谢你的帮助！

4

2 回答 2

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>

常见的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 */
}

享受:)

于 2012-07-01T19:41:23.097 回答
0

这是无限滚动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>

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

于 2012-07-01T20:47:08.083 回答