在容器div中将div水平居中

标记

我有多个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在这里

SW4

拆下浮子并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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在div中将表格水平居中

来自分类Dev

尝试在容器div中将div居中

来自分类Dev

在容器div中将2 div分别居中

来自分类Dev

水平和垂直将容器div居中

来自分类Dev

在固定div中将文本水平居中

来自分类Dev

如何在div中将表格水平居中?

来自分类Dev

在div中将li水平居中与溢出:自动

来自分类Dev

在固定div中将文本水平居中

来自分类Dev

在容器中将响应式DIV居中

来自分类Dev

在flex容器中水平居中两个div

来自分类Dev

水平和垂直居中放置DIV容器

来自分类Dev

如何使div水平居中

来自分类Dev

jQuery的水平居中的div的

来自分类Dev

如何使div水平居中

来自分类Dev

浮动水平居中的div

来自分类Dev

我如何在CSS中将div元素水平居中?

来自分类Dev

如何在固定div中将此水平列表居中?

来自分类Dev

在Bootstrap的容器中将span12 div居中

来自分类Dev

如何在单独的div中将容器内部的链接居中

来自分类Dev

如何在单独的div中将容器内部的链接居中

来自分类Dev

如何在主div容器内居中将表单请求div居中

来自分类Dev

在另一个浮动div中将水平绝对div水平居中

来自分类Dev

在div中将表格居中

来自分类Dev

在HTML中将div居中

来自分类Dev

如何在容器div中实现水平对齐,无间隙且居中的div元素

来自分类Dev

DIV位置:固定;水平居中

来自分类Dev

如何在固定宽度和边距的div中将div水平居中?

来自分类Dev

容器中的浮动div居中

来自分类Dev

在容器内将div居中