CSS background-position 无助于改变图像的位置

Posted 2023-03-06

【中文标题】CSS background-position 无助于改变图像的位置

【英文标题】：CSS background-position doesn't help to change where the image is

【发布时间】：2021-08-10 09:18:43

【问题描述】：

默认样式是：

.landing-icon.self-service-badge:before 
   background-image: url("/images/Evolution/site/self-service-badge.svg");
   height: 76px;
   width: 76px;

并且图像居中。但是在使用 Internet Explorer 时，背景图像在左侧。我试过这个：

.landing-icon.self-service-badge:before 
    background-size: cover;
    background-position: center;
    background-image: url("/images/Evolution/site/self-service-badge.svg");
    height: 76px;
    width: 76px;

但这对我不起作用，图像仍然在左侧，您有什么建议？

【问题讨论】：

您使用的是哪个版本的 Internet Explorer？

你能不能设置一个我们可以运行的 sn-p，因为目前 CSS 还不足以测试东西 - 我想必须有其他设置（例如使用 :before content: ''; property) 使其可以在其他浏览器上运行。

请同时提供相关的html代码。我们需要一个可以运行并且可以reproduce the issue 的代码sn-p。这样我们就可以进行测试，看看如何提供帮助。

【参考方案1】：

您是否尝试过使用自动对齐，这是一个示例。

img 
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;