在div中居中浮动图像

Question

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

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

我该如何解决这个问题？

Answer 1

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

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