我正在寻找一种方法来将SVG图标放置在square div的中心,并根据动态变化的c列的长度(宽度)和高度进行调整。我想在这里实现外观上的类似目标。
由于宽度和高度动态变化,因此line-height
不适合本示例。我正在寻找一种方法来将它在div的中心垂直和水平居中,而不需要线高。
可以包含flex没关系。
我想将每个正方形的宽度增加15%,但是高度没有调整的问题。
不知道Iunderstanding是否正确,但也许是这样,如果您不希望它在重新缩放时“快速下移”,则可以删除最小宽度和最小高度。
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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句