中心不是响应站点上的中心

Question

如果这些问题中的任何一个（有一个主要问题，然后是另一个不太重要的问题）是绝对的白痴问题，我真的很抱歉，但我必须承认它们让我很难过，所以我非常感谢我能得到的任何帮助。

首先，这是我的网站：“Narnia Greenville”。

问题是这样的：时间线（名为 thermometer.png）偏离中心，尽管我遵循了此处的所有选项：“http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/”以及其他几个站点。另外，如果您重新调整窗口大小，它似乎会在某个点无缘无故地从右跳到左。我想不通，最后一次尝试这样的网站（我失败得很惨）我遇到了同样类型的问题。我确信这个问题应该是盯着我的脸（并且可能在嘲笑我），但我一辈子都看不到它。目标是让“thermometer.png”在页面上水平和垂直居中，并位于所有其他图像的顶部。

下一个：图片很大！并永远加载，所以如果您的互联网连接有限，我建议您继续解决其他人的问题。我正在努力。我敢肯定你会说，我对大部分内容都是新手。 （在我有限的网页设计经验的大部分时间里，我一直在“重建”wordpress 主题，但没有一个包含这种东西。它只是工作......大声笑。）所以无论如何，虽然不是一个具体的问题，如果你想记录下您是如何减少图像加载时间的，请随意。

非常感谢任何愿意帮助我的人。再次，如果其中任何一个是愚蠢的问题，我深表歉意。大声笑。

Answer 1

如果您从 Photoshop 导出图像，请使用“保存为网络和设备”选项，使用 http://tinypng.org/ 和 http://www.jpegmini.com/ 等工具压缩您的图像。

Answer 2

哇哦！！！非常感谢@DevlshOne 的帮助！再玩一点，我就明白了！我最终使用的代码是这样的（使用@DevlshOne 代码中所有百分比的变体：http://jsfiddle.net/devlshone/WASbe/2/）：

.class {
position: fixed;
min-height: auto;
min-width: 100px;
/* Set up proportionate scaling */
width: calc(100% - 30px);
left: calc(50% - 47%);
height: auto;
/* Set up positioning */
top: 40%;
z-index: 9997;

}

我在输入时将其上传到测试站点，它应该会在那里保留相当长的时间，以供遇到此问题的其他人参考。 （测试站点在这里：http://goo.gl/9aXRcf。） 到目前为止一切顺利，再次感谢您的帮助！

Answer 3

如果窗口宽度低于 1024 像素，您的温度计会从右向左跳跃。这就是 CSS 的这一部分：

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  .thermometer {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

尝试将这两个都更改为正确，看看是否可以解决问题。

还有其他问题。该图像的宽度为 3696 像素（2772 像素 @ 75%）。你需要使用一些 CSS3 数学函数来让这个野兽正确居中。

.thermometer {
  /* Set rules to fill background */
  min-height: auto;
  min-width: 100px;

  /* Set up proportionate scaling */
  width: 75%; // maybe this should be: **width: calc(100% - 1386px);**
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 50%;
  left: 50%; // I don't see a reason for this at all... just let it take up the entire page
  z-index: 9997;
}