Question

我有一个向左浮动的无限制/未绑定数量的DIV代码。
在调整浏览器大小时，DIV标记将换行到下一行。
因为DIV标签根据屏幕右侧是否有足够的间距进行换行，当它们进行换行时，会在屏幕右侧留下很大的空间。
因此，如果DIV为32x32，则屏幕右侧会留下32x32的空间。

我希望父DIV在这种情况下将内容居中，所以如果有一个32px的空间在右侧作为换行的结果，它会调整子内容为16px左侧和右侧16px。

例如，如果内容不居中，屏幕将如下所示：

[DIV] [DIV] [DIV] [DIV] .. GAP 。|

[DIV]＆lt; -Wrapped ................. |

我想将这些DIV放在父级中，这样当DIV被包装时，内容将如下所示：

..... [DIV] [DIV] [DIV] [DIV] ..... | ＆lt; - 居中，但仍然向左浮动。

..... [DIV] ...... | ＆lt; - 父亲居中，但DIV仍在左侧浮动。

仍允许换行，但随着浏览器缩小或水平增长，父DIV会自动将子DIV的内容调整为居中。

我该如何做到这一点？

Answer 1

正如你所描述的那样，你无法做到。您可以将所有div设置为显示：inline-block而不是float left，然后将它们全部放在带有text-align center的大包装div中。但是，这会使div跳过一条线而不是向左对齐。

或者，您可以设置一个包装器div，其宽度设置为页面的百分比，也是最小像素宽度，然后设置为margin 0 auto。类似的东西：

div.wrapper {width:90%; min-width:800px; margin: 0 auto;}

我怀疑这会做你想的，但我还没有测试过。希望这能激发一些想法！

Answer 2

这可能不是你要求的，但我认为它符合美学要求：

<!DOCTYPE HTML>
<html lang="en">
<head>
<style>
    #wrapper {
        margin: 0 auto;
        border: 1px solid gray;
        text-align: justify;
    }

    .me {
        display: inline-block;
        padding: 1em;
        border: 1px solid blue;
    }
</style>
</head>
<body>
    <div id = "wrapper">
            <div class="me"><p>One line of stuff in a div.</p></div>
            <div class="me"><p>One line of stuff in a div.</p></div>
            <div class="me"><p>One line of stuff in a div.</p></div>
            <div class="me"><p>One line of stuff in a div.</p>
                <p>Or two.</p></div>
            <div class="me"><p>One line of stuff in a div.</p></div>
            <div class="me"><p>One line of stuff in a div.</p></div>
            <div class="me"><p>One line of stuff in a div.</p></div>
    </div>
</body>
</html>

在CSS中水平对齐浮动项

2 个答案: