我有多个div,它们是设置的宽度,我想在容器div中居中。子div的数量可能会有所不同,因此无论父div有多少个div,我都需要它们居中。注意:容器div必须具有position:absolute
<div class="wrapper">
<div class="f" ></div>
<div class="f" ></div>
<div class="f"></div><div class="f">
</div><div class="f"></div>
</div>
和CSS
.wrapper {
position: absolute;
width: 80%;
top: 0;
left: 0;
text-align: center;
margin: 0px auto;
border: 0.2rem solid black;
height: 0.8rem;
}
.f {
-webkit-box-shadow: inset 0.2rem 0 0 white;
box-shadow: inset 0.2rem 0 0 white;
background-color: red;
width: 35px;
height: 0.8rem;
position: relative;
float: left;
}
jsfiddle在这里
拆下浮子并display:inline-block
放在儿童身上,然后从容器上拆下高度,以便根据需要自动展开。
的CSS
.wrapper {
position: absolute;
width: 80%;
top: 0;
left: 0;
text-align: center;
margin: 0px auto;
border: 0.2rem solid black;
}
.f {
-webkit-box-shadow: inset 0.2rem 0 0 white;
box-shadow: inset 0.2rem 0 0 white;
background-color: red;
width: 35px;
}
i {
font-size: 0;
height: 0.8rem;
position: relative;
display:inline-block;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句