html – 中心x浮动量：左边divs水平

概述基本上我想要一个由同样大小的div构建的页面,例如100×100,但也有200×100的变体.它们都浮动：向左调整以适应窗口的大小.问题是,我不知道如何让他们在那个场景中居中,有时说连续3次或其他时间7因为通常你在右边有更多的空间使它看起来偏离中心. 提前致谢！ Are you looking for something like this?在容器上设置自动边距将使其水平居中.从那里,您可以浮动或 基本上我想要一个由同样大小的div构建的页面,例如100×100,但也有200×100的变体.它们都浮动：向左调整以适应窗口的大小.问题是,我不知道如何让他们在那个场景中居中,有时说连续3次或其他时间7因为通常你在右边有更多的空间使它看起来偏离中心.
提前致谢！解决方法 Are you looking for something like this?在容器上设置自动边距将使其水平居中.从那里,您可以浮动或内联您的块,以便以您说话的方式显示它们.看看CSS和HTML：

<div >    <div></div>    <div ></div>    <div></div>    <div></div>    ...</div>

这个HTML就像在语义上一样简单.理想情况下,我通常会将此作为无序列表,但由于您的标题提到了标题中的div,我走向了那个方向.

div.container div{    border: solID 2px black;    min-height: 100px;    wIDth: 100px;    display: inline-block;    background-color: white;    vertical-align: top;    margin: 10px;}div.container div.variant{    wIDth: 200px;}div.container{    margin: auto;    max-wIDth: 620px;    background-color: #ecefec;    padding: 10px;    Font-size: 0;}

JS Fiddle

这里发生了什么

我们通过属性显示内联块元素：inline-block;因此,我们需要制定一些额外的规则,以便在它们具有不同高度的情况下正确显示它们(这些将自动清除一行,与浮动元素不同).

内联元素上的属性vertical-align：top确保它的排列方式使元素的顶部边框与其兄弟元素的顶部边框齐平.

属性Font-size：0确保在块元素之间的间距计算中不考虑标记空白(否则包括一个div标签的关闭与另一个div标签的开口之间的每个空间).

这应该实现你想要实现的目标.

UPDATE

在查看您的评论以回答另一个问题后,我们需要添加text-align：center;到容器div的CSS,因为这将集中容器中的每一行.

Example

总结

以上是内存溢出为你收集整理的html – 中心x浮动量：左边divs水平全部内容，希望文章能够帮你解决html – 中心x浮动量：左边divs水平所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。