Question

我试图将svg文件居中放置在其父div中，但没有成功。

我创建了这个小提琴-> https://jsfiddle.net/wfukyd4q/

在哪里可以看到我做了以下事情：

<div class="col-md-10 col-md-offset-1 col-sm-12 text-center">
    <div style="background-color:#489734;height:500px">
         <img src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/compose_music_ovo2.svg">
    </div>
</div>

我的目标是使svg占50％并放在中心，但同时也要对移动设备做出响应。

谢谢

Answer 1

假设您的图片上了svg-image类：

<img class="svg-image" src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/compose_music_ovo2.svg">

请添加与此类似的css：

.svg-image {
    width: 50%;
}
@media only screen and (max-width: 992px) {
    width: 90%;
}

您可以为不同的屏幕尺寸指定多个@media查询，并应用所需的图像宽度。

编辑：

要垂直和水平居中放置图像，您可以在div中添加样式（用于包装图像）：

.class-of-your-div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    justify-content: center;
    align-items: center;
}

Answer 2

CSS background-*属性将满足您的要求。

div.text-center div {
  background-color: #489734;
  height: 500px;
  background-image: url("https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/compose_music_ovo2.svg");
  background-size: auto 50%;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="col-md-10 col-md-offset-1 col-sm-12 text-center">
  <div></div>
</div>

https://jsfiddle.net/wfukyd4q/7/

如果这不完全符合您在移动设备上的要求，则可以使用媒体查询来调整某些屏幕尺寸所需的CSS。

Answer 3

您是否尝试过给image元素指定一个ID，然后像这样在CSS中引用该元素：

div#foo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

其中img标记的示例ID为“ foo”

更新：

您可能需要像这样更改父母的位置：

  #parent {
    position: absolute

   }

div#foo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

Answer 4

还有另一种方法：

.col-md-10{position:relative;}
.col-md-10 img{
  display:block;
  width:50%;
  height:auto;
  position:absolute;
  margin:auto;
  top:0;bottom:0;right:0;left:0;
}

<div class="col-md-10 col-md-offset-1 col-sm-12 text-center">
                <div style="background-color:#489734;height:500px">
                    <img src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/compose_music_ovo2.svg">
                </div>

</div>

如何在其父div内调整SVG文件的大小，居中对齐并做出响应？

4 个答案: