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

Question

所以我的身体中有一个div,它是一个百分比宽度,内部是一个内联样式的div,如下所示:

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

正如你所看到的,我已经text-align: center;开启了,如果图像足够小,那么图像div居中.但div在我的1280x800屏幕上,百分比宽度绝对不会太大.

负利润是为了克服它父母的一些填充div.该overflow:hidden品牌的东西看起来像我想要的,不凌乱.所以,它就像我想要的那样工作,就像onenaught.com上的标题图片一样.当您使浏览器更宽,但不会从两侧扩展时,它将在右侧变得更加明显,因为它不是居中的.

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

编辑:此处的页面.

Answer 1

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

这是一个jsFiddle证明这一点.(使用下面的一个,它更好)

将图像margin-left和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(最新版本)和资源管理器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>

Answer 2

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

另一个选项(可能更好)不是使用图像标记,只是将图像设置为父div的背景,并使用背景定位CSS属性将其居中.这不仅可以确保它在不强制绝对定位的情况下居中,而且还会自动产生溢出,因此不需要溢出属性.

Answer 3

使用css transform,对于容器内的图像overflow: hidden和设置宽度:

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

jsFiddle在这里(我借用了Mathijs Flietstra的jsFiddle的一部分,谢谢).