【问题标题】：Desperate image positioning problem绝望的图像定位问题
【发布时间】：2009-07-12 06:53:40
【问题描述】：

我想要的是这个：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>

【问题讨论】：

似乎不需要绝对定位，但如果可能，请同时显示其他内容和网格线。
这个问题似乎是他之前问题的延续（在这里找到：tinyurl.com/swarts1，由于链接格式，TinyUrl'd），它可能有助于了解问题的历史。
是的，这是我老问题的延续。我已经添加了代码，因此无需查看旧帖子。此外，我链接到了一个更明确的布局图像。有了这些信息，你知道这种布局是否可行吗？
我尝试使用全屏 div 容器和溢出来解决问题，但没有成功。代码如下：
如果有人有任何想法，请分享。我不知所措。迈克
我很快就会在下面更新我的答案。感谢您更新信息。

标签： javascript html css

【解决方案1】：

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

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

【讨论】：

不正确。您可以使用 css 垂直居中。只是不简单。
正如我在回答中所说，如果你有元素的高度/宽度，你可以垂直居中，他会这样做。我不确定这是否是 cdm9002 所暗示的，或者他是否在谈论 table-cell 显示属性等内容。:)

【解决方案2】：

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

更新您最近的编辑

问题是您需要使用相对定位。您还应该有一个容器 DIV 用于图像和侧边栏 div，因为只有 body 作为父级时，它们仍然会出现错误。

然后，您需要容器 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 值是任意的。它只需要大于两个元素的宽度。您可能想玩一下，看看侧边栏开始从页面上掉下来的宽度（在浏览器中向右剪切是不可避免的）

【讨论】：

已更新。希望您能提供帮助！
好的，已更新。图片不再从页面左侧滑落。
感谢您的回复。我无法让它工作。没关系，只是它不是垂直居中的。图像和文本 div 的上半部分都被切断了。 “顶部：50%”不起作用。我正在 Safari 4 中进行测试。有什么想法吗？
它在 Safari 4 和我测试的所有其他浏览器中为我垂直居中。您是否粘贴了我的确切代码？