Question

我正在寻找一种方法将SVG图标放在方形div的中心，并在动态更改c列的长度（宽度）和高度上进行调整。我希望在它看起来像here这样的东西。

由于宽度和高度动态变化line-height不合适，如示例中所示。我正在寻找方法将它垂直和水平居中在div的中心没有行高。

如果涉及到flex，也没关系。

我认为每个方格宽度增加15％，但高度未调整的问题。

Answer 1

不确定我是否理解正确，但也许是这样，如果您不希望它在重新缩放时“按下一条线”，则可以删除最小宽度和最小高度。

<强> HTML：

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

<强> CSS：

body{
    width: 100%;
    height: 100%;   
    margin 0;
    padding 0;
}

#wrapper{
    width: 100vw;
    height: 100vh;
    background-color: #ccc;
}

.box {
    width:20%;
    height:20vw;
    min-width:100px;
    min-height: 100px;
    max-width: 200px;
    max-height: 200px;
    margin:1%;
    background:DodgerBlue ;
    float:left;
    background-image: url("http://www.youtube.com/yt/brand/media/image/YouTube-icon-dark.png");
    background-repeat:no-repeat;
    background-size:contain;
    background-position: center center;
}

<强> DEMO

Answer 2

基于PatrikFröhler回答我的身高有些问题:(
为了纠正这个问题，这里使用“calc”是我的最终代码，可能对某人有所帮助。

#wrapper {
 width:70%;
}

.box {
 width:20%;
 padding-bottom: calc(20% * 4 / 4);
 margin:1%;
 background:DodgerBlue ;
 float:left;
 background-image: url("https://cipherpoint.com/wp-content/uploads/2012/11/box-512.png");
 background-repeat:no-repeat;
 background-size:70%;
 background-position: center center;
}

DEMO

如何调整svg在广场的中心，能够动态调整到屏幕

2 个答案: