首页 / 知识

关于html：CSS-使div水平对齐

2023-04-13 18:48:00

CSS - Make divs align horizontally

我有一个带有固定width和height以及overflow: hidden的容器div。

我想要水平行的float：在此容器内的左div。在向左浮动的Divs读取其父级的右边界后，自然会推到下面的"行"上。即使父级的height不允许这样做，也会发生这种情况。这是这样的样子：

！[错误] [1]-删除了已由广告替换的图片棚屋图片

我希望它看起来如何：

！[右] [2]-删除了已被广告替换的图片棚屋图片

注意：我想要的效果可以通过使用内联元素＆white-space: no-wrap来实现(这就是我在所示图像中所做的事情)。但是，这对我不利(由于冗长的原因，在这里无法解释)，因为子div需要浮动块级元素。

您可以在容器中放置一个内部div，其宽度足以容纳所有浮动的div。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#container {
background-color: red;
overflow: hidden;
width: 200px;
}

#inner {
overflow: hidden;
width: 2000px;
}

.child {
float: left;
background-color: blue;
width: 50px;
height: 50px;
}

对于父级div的style="overflow:hidden"和所有子级divs的style="float: left"对于使divs在IE7及以下版本的旧浏览器中水平对齐很重要。

对于现代浏览器，您可以对所有子级divs使用style="display: table-cell"，它将正确地水平呈现。

这似乎接近您想要的：

1
2
3
4
5
6
7
8
9
10
11
12
13

#foo {
background: red;
max-height: 100px;
overflow-y: hidden;
}

.bar {
background: blue;
width: 100px;
height: 100px;
float: left;
margin: 1em;
}

您可以使用clip属性：

1
2
3
4
5
6

#container {
position: absolute;
clip: rect(0px,200px,100px,0px);
overflow: hidden;
background: red;
}

请注意为了使clip工作所需的position: absolute和overflow: hidden。

浮动：向左显示：如果行内块超过容器的宽度，它们都将无法水平对齐。

重要的是要注意，如果元素必须水平显示，则容器不应包装：
white-space: nowrap

现在，您可以根据需要使用CSS Flexbox在水平和垂直方向上对齐div。通用公式像这样

1
2
3
4
5
6
7
8
9

parent-div {
display:flex;
flex-wrap: wrap;
justify-content: center ; /* for horizontal aligning of child divs */
align-items : center ; /* for vertical aligning */
}
child-div {
width: /* yoursize for each div */ ;
}

漂浮他们离开。至少在Chrome中，在LucaM的示例中，您不需要包装id="container"。

您可以执行以下操作：

1
2
3
4
5
6
7
8
9
10