CSS Splash 无法将每个尺寸的图像居中

Question

我有一个初始图像，它会在页面加载时随我的软件一起加载。

在窗口的当前大小(1024 像素)下，图像以居中方式加载，但是当窗口开始最大化时，它太靠左了。

这是我的CSS:

#splash {
  width: 700px;
  height: 50px;
  line-height: 50px;
  margin: 14% 14%;
  position: absolute;
  box-sizing: border-box;
  text-align: center;
  z-index: 1;
}

#splash img {
  width: 700px;
  height: auto;
}

如何更改此 css 以使其在任何窗口大小下都居中加载？

Answer 1

您的代码需要稍微整理一下。看看我为你做的这个更新的 fiddle ，它有一些改进可以解决你的问题:https://jsfiddle.net/Ly06krt3/29

你需要做的:

#splash {
   max-width: 700px;
   height: auto;
   line-height: 50px;
   margin: 0 auto;  
   box-sizing: border-box;
   text-align: center;
   z-index: 1;
   width: 100%;
}

#splash img {
  width: 100%;
  height: auto;
}

使 div 居中。我已将 max-width 添加到 #splash ID；这将给它一个固定的宽度，直到浏览器到达那个点，然后由于 width: 100% 而调整大小。

您还需要使代码响应更友好。因此，向 img 添加百分比宽度将使其在调整浏览器大小时具有流动性。