您最近编辑的更新

Question

我想要的是：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 &#169; 2009 Company Inc. All rights reserved.</span>
</div>

</body>

</html>

Answer 1

只要定义了图像宽度和高度，它就可以使用absolute或relative定位。

您最近编辑的更新

问题是您需要使用相对定位。你还应该有一个容器DIV用于图像和侧边栏div，因为它们仍然会错误地仅将主体作为父级。

然后，您需要在容器div上使用最小宽度，设置为您在较新图像中说明的最小宽度。这些东西一起会给你你想要的东西。

请注意，侧栏内容需要在此代码中使用不同的页边距。我不确定为什么因为我的CSS有点生疏，但现在两个都是relative定位，如果侧边栏内容没有负边距，它的顶部将与底部对齐图片。我知道margin-top: -256px会使它与图像的顶部对齐。然后，要将它们垂直居中，您需要添加其差异的一半或(256 - 400) / 2，因此您将-72px添加到-256px边距以再次居中。

以下是适用于我的代码：

<html>
<head>
<title>Title</title>

<style>

body {
  margin: 0;
}

#container {
  background: #DDD;
  position: absolute;
  height: 100%;
  width: 100%;
  min-width: 900px;
}

img#image {
  position: relative;
  left: 50%;
  top: 50%;
  margin: -128px 0 0 -432px;
  background: black;
  display: block;
}

div#sidebar {
  position: relative;
  left: 50%;
  top: 50%;
  margin: -328px 0 0 0;
  width: 368px;
  height: 400px;
  background: grey;
}

.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>

<div id="container">

    <img id="image" src="" width="432" height="256"/>

    <div id="sidebar" style="">
      <!-- text content -->
      content
    </div>

</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="" 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 &#169; 2009 Company Inc. All rights reserved.</span>
</div>


</body>

</html>

注意我添加了颜色以帮助我，并且我发现您必须将display: block添加到图像中。

希望这有帮助。

注意：min-width值是任意的。它只需要大于两个元素的宽度。你可能想玩，看看边栏开始从页面上掉下来的宽度（在浏览器中向右剪裁是不可避免的）

Answer 2

我想你可能会想要这样的东西：

<div style="width:50%; height:100%; position:absolute; text-align:right; overflow:auto">
<img src='...'>
</div>

但是要将图像垂直居中，您需要将其放入表格或使用JavaScript。

绝望的图像定位问题

2 个答案:

您最近编辑的更新