如果图像比容器宽,我该如何居中？

Question

通常情况下,您使用图像居中display: block; margin: auto,但如果图像大于容器,则它会向右溢出.如何让它同样溢出到双方？容器的宽度是固定的并且是已知的.图像的宽度未知.

Answer 1

一个纯粹的CSS解决方案

需要一个额外的包装器(在FireFox,IE8,IE7中测试):

改进的答案

原始答案存在问题(如下).如果图像大于outer以其自动边距为中心的容器,则它会截断左侧的图像并在右侧创建过多的空间,如此小提示所示.

我们可以通过inner向右浮动然后从右侧居中来解决这个问题.这仍然img会将页面向左截断,但是它通过明确地按此方式将其向前推,然后从中心向后移动,其组合阻止了右侧的额外水平滚动.现在我们只需要根据需要获得正确的滚动,以便查看图像的正确部分.

小提琴示例(小提琴中的边框仅用于演示.)

基本的CSS

div.outer {
    width: 300px; /* some width amount needed */
    margin: 0 auto; 
    overflow: visible;
}
div.inner {
    position:relative;
    float: right; /* this was added and display removed */
    right: 50%;
}
div.inner img {
    position: relative; 
    right:-50%; /* this was changed from "left" in original */
}

如果你想要没有正确的滚动宽图像

然后使用上面的内容,还可以设置任何元素包装outer(如body或第三个包装器)overflow: hidden.

原创(历史)

小提琴示例(小提琴中的边框仅用于演示.)

HTML

<div class="outer">
    <div class="inner">
        <img src="/yourimage.png">
    </div>
</div>

CSS

div.outer {
    width: 300px; /* some width amount needed */
    margin: 0 auto; 
    overflow: visible;
}
div.inner {
    display: inline-block; 
    position:relative; 
    right: -50%;
}
div.inner img {
    position: relative; 
    left:-50%; 
}

Answer 2

这是一个2行CSS解决方案(跨浏览器支持可能需要更多行):

img {
    margin-left: 50%;
    transform: translateX(-50%);
}

Answer 3

HTML

?<div class="image-container">
  <img src="http://www.google.com/images/logo.gif" height="100" />
</div>?

CSS

.image-container {
    width: 150px;
    border: solid 1px red;
    margin:100px;
}

.image-container img {
    border: solid 1px green;
}

jQuery的

$(".image-container>img").each(function(i, img) {
    $(img).css({
        position: "relative",
        left: ($(img).parent().width() - $(img).width()) / 2
    });
});

​

在jsFiddle上看到它:http://jsfiddle.net/4eYX9/30/

Answer 4

另类纯CSS解决方案是使用transform属性:

HTML:

<div class="outer">
    <img class="image" src="http://www.gstatic.com/webp/gallery/4.jpg" />
</div>

CSS:

.outer {
    position: relative;
    width: 100px;
    border: 1px solid black;
    height: 150px;
    margin-left: 100px; /* for demo */
    /* overflow: hidden; */
}

img.image {
    width: 200px;
    opacity: 0.7;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

小提琴

只需添加一个overflow:hidden父级div来隐藏图像的额外区域.