Question

所以我的身体中有一个div，它是一个百分比宽度，而且里面有一个内联样式的div，如下所示：

text-align: center; margin-left: -15px; margin-right: -15px; overflow: hidden;

正如您所看到的，我已经开启了text-align: center;，如果图片对于div来说足够小，则会使图像居中。但是在我的1280x800屏幕上，宽度div的宽度绝对不够大。

负边距是为了克服它的父div上的一些填充。 overflow:hidden使事情看起来像我想要的，而不是凌乱。所以，它就像我想要的那样工作，就像onenaught.com处的标题图像一样。当你使浏览器变宽时，它会变得更加明显，但不会从两侧扩展，因为它不是居中的。

所以，我想知道是否有任何方法可以使图像居中。知道吗？

修改：第here页。

Answer 1

您可以通过将图片上的margin-left和margin-right设置为-100%来实际执行此操作。

~~这是一个 jsFiddle 来证明这一点。~~（改用下面的那个，更好）

最好将图片上的margin-left和margin-right设置为更大的负数，例如-9999%与-100%值一样，只要div包含元素的宽度小于{{1}的宽度的3倍，图像就会开始偏离中心}}：

div

您可以通过将溢出切换为可见并将结果窗口的大小调整为小于宽度的margin-left: -100% + the div's width: 100% + margin-right: -100% = 3x div width来检查此 jsFiddle 与前一个之间的行为差异300%。

在支持的浏览器范围内（来自评论）引用@MaxOriola：

我已经在Firefox，Chrome，Safari（最新版本）和资源管理器8,9,10中重新测试了第二个小提琴。在所有这些中都可以正常工作。

注意：图片元素必须显示div或inline，并以inline-block水平居中（在包装元素上）。

text-align: center

// ALL of the JS below is for demonstration purposes only

$(document).ready(function() {
  $('a').click(function() {
    $('body > div').toggleClass('overflow');
  });
})

img {
  margin: 0 -9999% 0 -9999%;
}


/* ALL of the CSS below is for demonstration purposes only */

body {
  text-align: center;
  font-family: verdana;
  font-size: 10pt;
  line-height: 20pt;
}

body>div {
  margin: 0px auto;
  width: 40%;
  background-color: lightblue;
  overflow: hidden;
}

img {
  vertical-align: top;
}

.overflow {
  overflow: visible;
}

Answer 2

一种选择是用left: 50%绝对定位图像，然后在图像上使用负边距 - 等于图像宽度的一半。当然，这要求包含div将其定位设置为相对或绝对，以便为图像提供适当的容器类型，以便绝对定位。

另一个选项（可能更好）不是使用图像标记，只需将图像设置为父div的背景，然后使用background positioning CSS attributes将其居中。这不仅可以确保它在不强制绝对定位的情况下居中，而且还会自动裁剪溢出，因此不需要溢出属性。

Answer 3

使用css transform，对于overflow: hidden和设置宽度的容器内的图片：

img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: block; /* optional */
}

jsFiddle here（我借用了Mathijs Flietstra的一部分jsFiddle，谢谢）。

Answer 4

考虑将图像用作背景;）

使用背景位置来获得你想要的东西。

您可能需要一个javascript解决方案来实现一致的跨浏览器结果

Answer 5

我找到了另一个解决方案

<style type="text/css">
    .container {
        width:600px; //set how much you want
        overflow: hidden; 
        position: relative;
     }
     .containerSecond{
        position: absolute; 
        top:0px; 
        left:-100%; 
        width:300%;
     }
     .image{
        width: 800px; //your image size 
     }           
</style>

和身体

<div class="container">
   <div class="containerSecond">
       <image src="..." class="" />
   </div>
</div>

每当容器变大或变小时，这将使您的图像居中。在这种情况下，您的图像应该大于容器的300％而不是居中，但在这种情况下，您可以使用containerSecond更大，并且它将起作用

将div中的图像居中放置得太小了？

5 个答案: