在div中居中浮动图像 [英] Centering floated images in div

问题描述

我正在尝试将浮动图片放在我的网页上，但我无法让它工作。这是我的代码

I'm trying to center floated images on my page, but I can't get it to work. Here is my code

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

HTML

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>

如何解决这个问题？

推荐答案

您可以将容器置于中心，并且在线锁定子项以实现所需的布局。

You can center the container and inline-block the children to achieve the desired layout.

.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以使其有效

I would definitely correct the HTML as well to make it valid

<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>

这篇关于在div中居中浮动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！