2

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

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

How can I fix this problem?

4

5 回答 5

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>
于 2013-04-11T13:35:38.153 回答
1

我想你想要这样

http://jsfiddle.net/JZxxG/

你的 CSS

.imcontainer {
    text-align: center;
    display: inline-block;
    width: 100%
}
.float {
    float: left;
    font-size: small;
    height: auto;
    width: 100%;
}
于 2013-04-11T13:35:38.807 回答
0

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

于 2013-04-11T14:05:52.417 回答
0

尝试这个：

.float {
    float: left;
    font-size: small;
    height: auto;
    margin: 5px 7px 0 3px;
    width: 100px;
    text-align: center;
}
于 2013-04-11T13:31:21.323 回答
0

使用这个 CSS：

.imcontainer {
    text-align: center;
}
.float {
    display: inline-block;
    font-size: small;
    height: auto;
    margin: 5px 7px 0 3px;
    width: auto;
}
于 2013-04-11T13:35:08.680 回答