Fatal编程技术网
  • css/
  • Css 在容器内水平流动的物品与中心对齐

Css 在容器内水平流动的物品与中心对齐

css

Css 在容器内水平流动的物品与中心对齐,css,css-float,alignment,Css,Css Float,Alignment,我的困境是（我想应该很简单）：我有一个容器和一组项目（都是div）。以下CSS适用： .container { float: left; width: 100%; } .item { margin: 32px; text-align: center; position: relative; float: left; } .item本身是一个容器，它可以包

我的困境是（我想应该很简单）：我有一个容器和一组项目（都是div）。以下CSS适用：

.container {
    float:          left;
    width:          100%;
}


.item {
    margin:         32px;
    text-align:     center;
    position:       relative;
    float:          left;
}
.item本身是一个容器，它可以包含几乎任何一组任意元素，但它们需要在其中居中对齐（在我的例子中，它通常包含一个缩略图图像和一个小的文本标题）。虽然上面的CSS允许每个.item以我喜欢的方式水平流动，但我不知道如何使整个集合中心对齐（而不是像现在这样从左向右流动）。

编辑 将
.item{display:block；}
更改为
.item{display:inline block；}
，取出
。item{float:left；}
并添加
文本对齐：居中到
容器

你可以在这里看到：


您还可以将
.inner
div设置为
宽度：75%；保证金：0自动然后将
项
放入其中，如果您希望在侧面留出一些空间的话
 您将想看看Mozilla的本教程。只需将父容器设置为
text align:center


.container{


宽度：100%；



}



.item{



页边距：32px；



文本对齐：居中；



}

当您将宽度设置为100%并将显示设置为块时，为什么要使用浮动div？我认为块显示实际上是多余的，因为它们是div。不完全确定我是否理解为什么它仍然像它那样工作……内联块？我甚至不知道它的存在。。。愚蠢的w3schools。这在所有浏览器中都不起作用。特别是IE6和IE7有bug支持。请参阅下面我的答案，了解真正的跨浏览器实现。另外。。。关于w3schools check out:即将在：（我认为）这使得所有
.item
div堆叠在一起。这不是他想要的。在他的代码中。容器宽度设置为100%，项目为块。我以为他想要。物品分类要叠起来。