我需要将图像置于绝对定位div的左边(和右边的另一边)上,即图像的中间与容器的左边缘对齐。图像和容器的尺寸都很流畅。
图像必须绝对定位,因为其中有一些需要重叠。 IE8必须支持该解决方案。我可以自由添加更多包含元素,但如果不是绝对必要,我宁愿不这样做。
我可以用javascript做到这一点,但真的更喜欢纯css解决方案。
以下是我尝试实现的内容以及代码的示例:http://jsbin.com/yupuy/1/edit?html,css,output
任何帮助都将不胜感激。
答案 0 :(得分:0)
不完全确定你的意思是" center",但听起来你想要这样的东西: 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>
答案 1 :(得分:0)
如果我理解你,那就是现代浏览器的方法: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。