Question

我需要将图像置于绝对定位div的左边（和右边的另一边）上，即图像的中间与容器的左边缘对齐。图像和容器的尺寸都很流畅。

图像必须绝对定位，因为其中有一些需要重叠。 IE8必须支持该解决方案。我可以自由添加更多包含元素，但如果不是绝对必要，我宁愿不这样做。

我可以用javascript做到这一点，但真的更喜欢纯css解决方案。

以下是我尝试实现的内容以及代码的示例：http://jsbin.com/yupuy/1/edit?html,css,output

任何帮助都将不胜感激。

Answer 1

不完全确定你的意思是＆＃34; center＆＃34;，但听起来你想要这样的东西： http://jsfiddle.net/eexbohsx/1/

<强> CSS

.image-wrapper {
  position: relative;
}
img {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

<强> HTML

<div class="image-wrapper">
  <img src="http://placehold.it/350x150" alt="Example" />
</div>

Answer 2

如果我理解你，那就是现代浏览器的方法：http://codepen.io/pageaffairs/pen/tJHjk

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

div {
  position: absolute;
  left: 0;
  right: 0;
  width: 30%;
  height: 100%;
  margin: auto;
  outline: 1px solid red;
}

.right {
  position: absolute;
  left: 100%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform:translate(-50%, 0);
  -ms-transform:translate(-50%, 0);
  -o-transform:translate(-50%, 0);
  transform: translate(-50%, 0);
}

.left {
  position: absolute;
  right: 100%;
  top: 200px;
  -webkit-transform: translate(50%, 0);
  -moz-transform:translate(50%, 0);
  -ms-transform:translate(50%, 0);
  -o-transform:translate(50%, 0);
  transform: translate(50%, 0);
}

</style>
</head>
<body>
<div>
    <img class="left" src="http://placehold.it/450x100" alt="">
    <img class="right" src="http://placehold.it/350x150" alt="">
</div>
</body>
</html>

如果对您来说非常重要，您可以为过时的浏览器提供一些条件JS。

中心绝对定位元素位于容器的左边缘

2 个答案: