13

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

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

如您所见，我有text-align: center;on，如果图像足够小，可以将图像div居中。但div在我的 1280x800 屏幕上，百分比宽度肯定不够大。

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

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

编辑：页面在这里。

4

5 回答 5

33

实际上，您可以通过将图像上的margin-leftand设置为.margin-right-100%

这是一个jsFiddle演示。（改用下面那个更好）

margin-left将图像上的and设置margin-right为更大的负数是一个更好的主意，例如-9999%，与-100%值一样，一旦div' 的包含元素变得小于 3 倍的宽度，图像就会开始偏离中心的宽度div：

margin-left: -100% + the div's width: 100% + margin-right: -100% = 3x div width

您可以通过将溢出切换为可见并将结果窗口的大小调整为jsFiddle小于.300%div

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

我已经在 Firefox、Chrome、Safari（最新版本）和 Explorer 8、9、10 中重新测试了第二把小提琴。在所有这些中都可以正常工作。

注意：图像元素必须显示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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>40% wide div [<a href="#">toggle overflow</a>]
  <div>
    <img src="http://via.placeholder.com/400x200" />
  </div>
  400px wide image
</div>

于 2013-05-20T04:55:38.510 回答
27

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

另一个选项（可能更好）是不使用图像标签，只需将图像设置为父 div 的背景，并使用背景定位 CSS 属性将其居中。这不仅确保它居中而不强制绝对定位，而且它还自动裁剪溢出，因此溢出属性不是必需的。

于 2009-08-27T22:53:57.123 回答
5

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

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

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

于 2016-04-04T08:36:30.233 回答
2

考虑使用图像作为背景；）

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

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

于 2009-08-27T22:54:57.327 回答
2

我找到了另一个解决方案

<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 更大，它会起作用

于 2013-08-03T08:51:57.187 回答