html - 在响应式 div 框中将矢量图像居中？

Question

我有一个矢量 img，它以正确的尺寸出现在使用此 css 的响应式 div-box 中:

.col1 > div {
  width:100%;
  height:25%;
  position: relative;
}
.thisIMGcontainer {
  height: 100%;
  width: 100%;
  position: absolute;
  display: table;
}
.thisIMG {
  background-image: url('../img/thisIMG.png');
  background-size: contain;
  background-repeat: no-repeat;
}

对于这个 HTML:

<div class="col1">
    <div class="box1">
      <div class="thisIMGcontainer"><div class="thisIMG"></div></div>
    </div><!--/box1-->
</div>

我尝试了多种 CSS 组合来使 img 居中对齐，但它要么保持向左对齐，要么随机消失!

display: table-caption; or display: inline-block; and margin: 0 auto;

Answer 1

您的图像 div 没有宽度，因此它占用所有可用宽度 - 100%。如果你想让图像居中，你要么必须使用 <img>标记而不是使用背景图像，或者您必须在 .thisIMG 中设置宽度类(class)。