在 div 中居中浮动图像

Posted 2023-03-05

【中文标题】在 div 中居中浮动图像

【英文标题】：Centering floated images in 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   src="image.jpg"></div>
    <div class="float"><img   src="image.jpg"></div>
    <div class="float"><img   src="image.jpg"></div>
    <div class="float"><img   src="image.jpg"></div>
    <div class="float"><img   src="image.jpg"></div>
</div>

我该如何解决这个问题？

【问题讨论】：

你几乎错过了所有</div>

如果这是您的实际代码，请注意浮动 div 都在彼此内部。这是设计使然吗？

你必须先给float div 固定宽度

抱歉，我没有正确复制代码。马上更新

【参考方案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    src="image.jpg"/></div>
    <div class="float"><img    src="image.jpg"/></div>
    <div class="float"><img    src="image.jpg"/></div>
    <div class="float"><img    src="image.jpg"/></div>
    <div class="float"><img    src="image.jpg"/></div>
</div>

【讨论】：

jsfiddle.net/audetwebdesign/NFWPh 的工作演示基本相同。我会摆脱图像下方的空间。随意分叉并添加到您的答案中。 +1

谢谢，效果很好。一个问题是我听说 display:inline-block 没有得到广泛支持？这是真的吗？

乐于助人！如果您想支持 IE7 及以下版本，则有 some workarounds 但其他所有浏览器都可以追溯到很长一段时间 supports it 单击该页面上的 显示所有版本 链接可以看到很多绿色 = 支持： -)