html - 居中对齐我的大照片，没有负边距

Question

我创建了一个 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;}

感谢您的帮助!

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>

常用的 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;
}

显示:表格方式:

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

享受 :)