在 div 中居中浮动图像答案

【问题标题】：Centering floated images in div在 div 中居中浮动图像
【发布时间】：2013-04-03 17:17:24
【问题描述】：

我正在尝试在我的页面上居中浮动图像，但我无法让它工作。这是我的代码

.imcontainer {
    text-align:center;
    display:inline-block;
}.float {
    float: left;
    font-size: small;
    height: auto;
    margin: 5px 7px 0 3px;
    width: auto;
}

HTML

<div class="imcontainer">
    <div class="float"><img width="70px" height="70px" src="image.jpg"></div>
    <div class="float"><img width="70px" height="70px" src="image.jpg"></div>
    <div class="float"><img width="70px" height="70px" src="image.jpg"></div>
    <div class="float"><img width="70px" height="70px" src="image.jpg"></div>
    <div class="float"><img width="70px" height="70px" src="image.jpg"></div>
</div>

我该如何解决这个问题？

【问题讨论】：

你几乎错过了所有</div>
如果这是您的实际代码，请注意浮动 div 都在彼此内部。这是设计使然吗？
你必须先给float div 固定宽度
抱歉，我没有正确复制代码。马上更新

标签： css css-float centering

【解决方案1】：

@andyb 给出了一个完美的解决方案，但是如果你仍然不满意，你可以尝试将display: table-cell; text-align: center; 添加到您的float，而不是添加到您的imcontainer，如果您想要一些差距，请添加@987654324 @。

【讨论】：

【解决方案2】：

我想你想要这样

http://jsfiddle.net/JZxxG/

你的 CSS

.imcontainer {
    text-align: center;
    display: inline-block;
    width: 100%
}
.float {
    float: left;
    font-size: small;
    height: auto;
    width: 100%;
}

【讨论】：

【解决方案3】：

使用这个 CSS：

.imcontainer {
    text-align: center;
}
.float {
    display: inline-block;
    font-size: small;
    height: auto;
    margin: 5px 7px 0 3px;
    width: auto;
}

【讨论】：

【解决方案4】：

试试这个：

.float {
    float: left;
    font-size: small;
    height: auto;
    margin: 5px 7px 0 3px;
    width: 100px;
    text-align: center;
}

【讨论】：

【解决方案5】：

您可以将容器居中并内联阻止子项以实现所需的布局。

.imcontainer {
    text-align:center; /* center everything in the container */
}

.float { /* not really float any more so best to rename this */
    display:inline-block; /* so the children on the same line */
    font-size: small;
    height: auto;
    margin: 5px 7px 0 3px;
    width: auto;
}

我肯定会更正 HTML 以使其有效

<div class="imcontainer">
    <div class="float"><img width="70" height="70" alt="" src="image.jpg"/></div>
    <div class="float"><img width="70" height="70" alt="" src="image.jpg"/></div>
    <div class="float"><img width="70" height="70" alt="" src="image.jpg"/></div>
    <div class="float"><img width="70" height="70" alt="" src="image.jpg"/></div>
    <div class="float"><img width="70" height="70" alt="" src="image.jpg"/></div>
</div>

【讨论】：

jsfiddle.net/audetwebdesign/NFWPh 的工作演示基本相同。我会摆脱图像下方的空间。随意分叉并添加到您的答案中。 +1
谢谢，效果很好。一个问题是我听说 display:inline-block 没有得到广泛支持？这是真的吗？
乐于助人！如果您想支持 IE7 及以下版本，则有 some workarounds 但其他所有浏览器都可以追溯到很长一段时间 supports it 单击该页面上的 显示所有版本 链接可以看到很多绿色 = 支持： -)