我想要的是:http://www.freeimagehosting.net/image.php?11b1fcb689.png
编辑:添加了我正在尝试做的更完整的图片。我可以使用绝对定位使它看起来正确，但是当窗口太小时，内容会从页面上滑落而没有水平滚动条。这就是为什么我想对 div 使用相对定位。再次感谢。 http://www.freeimagehosting.net/image.php?75c33eaf6e.png
我只知道如何使用绝对定位的 div 来做到这一点，但是当窗口太小时，绝对 div 中的内容会从页面上滑落。本质上，图像垂直居中并在屏幕的左半部分右对齐。如果窗口太小，我宁愿有一个水平滚动条也不愿丢失部分图像。
如有任何帮助，我们将不胜感激!
迈克
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
body {
margin: 0;
}
.footer {
color: #202054;
text-align: left;
font-size: 12px;
text-decoration: none;
margin-left: 20px;
}
a { border: 0px; text-decoration: none; font-family: Verdana, "Lucida Grande", Helvetica, Arial, sans-serif; }
span { text-decoration: none; font-family: Verdana, "Lucida Grande", Helvetica, Arial, sans-serif; }
a.footer:hover {
color: #EE001E;
text-decoration: underline;
}
</style>
</head>
<body>
<img style="position: absolute; right: 50%; top: 50%; margin-top: -128px;" src="Resources/chart.png" width="432" height="256"/>
<div style="position: absolute; left: 50%; top: 50%; margin-top: -200px; width: 368px; height: 400px;">
<!-- text content -->
</div>
<div style="position: absolute; width: 100%; height: 20px; bottom: 20px;">
<a style="text-decoration: none;" href="http://www.company.com" >
<img class="footer" src="Resources/logo.png" alt="company" width="21" height="13"/>
</a>
<a class="footer" href="#">Terms of Use</a>
<a class="footer" href="#">Privacy Policy</a>
<span class="footer" style="color: #7E7E7E;">Copyright © 2009 Company Inc. All rights reserved.</span>
</div>
</body>
</html>
最佳答案
我想你可能想要这样的东西:
<div style="width:50%; height:100%; position:absolute; text-align:right; overflow:auto"> <img src='...'> </div>
但要使图像垂直居中，您需要将其放入表格或使用 JavaScript。
关于javascript - 绝望的图像定位问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1115444/