在响应式 div 框中将矢量图像居中？答案

【问题标题】：Center a vector img in a responsive div box?在响应式 div 框中将矢量图像居中？
【发布时间】：2014-05-27 20:37:09
【问题描述】：

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

.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 居中对齐，但它要么保持在左侧对齐，要么随机消失！

显示：表格标题；或显示：内联块；和边距：0自动；

【问题讨论】：

顺便说一句，PNG 不是矢量图。
@AndreiVolgin 感谢您指出这一点.. 什么格式？

标签： html css image responsive-design center

【解决方案1】：

您的图像 div 没有宽度，因此它占用所有可用宽度 - 100%。如果您希望图像居中，则必须使用<img> 标签而不是使用背景图像，或者您必须在.thisIMG 类中设置宽度。

【讨论】：

感谢您的提示.. 即使删除所有 css，使用它只是填充 div 框，只显示图像的上半部分？
你根本不需要.thisIMGcontainer div。