logo标签列表

在另一个div中，始终使动态宽度的div保持居中

javascriptjqueryhtmlcss
3

我有很多带内容的盒子。每行盒子的数量会根据浏览器窗口的宽度而变化。

如何使所有的盒子在页面上始终水平居中显示？

以下是参考链接：FIDDLE

HTML：

<body>
<div class="centered">
    <div class="segment">Content</div>
    <div class="segment">Content</div>
    <div class="segment">Content</div>
    <div class="segment">Content</div>
    <div class="segment">Content</div>
    <div class="segment">Content</div>
    <div class="segment">Content</div>
    <div class="segment">Content</div>
    <div class="segment">Content</div>
    <div class="segment">Content</div>
    <div class="segment">Content</div>
</div>
</body>

CSS:

body {
    background-color:grey;
    margin:0px;
    padding:0px;
}
.centered {
    min-width:620px;
    max-width:1920px;
    margin-right:auto;
    margin-left:auto;
}
.segment {
    float:left;
    height:300px;
    width:300px;
    margin:5px;
    background-color:red;
}

我可以接受JavaScript和jQuery的解决方案，但如果可能的话，我更愿意坚持使用HTML和CSS。

4个回答
1

试试这个

.centered {
    min-width:640px;
    max-width:1920px;
    margin-right:auto;
    margin-left:auto;
    display:inline-block;
    text-align:center;
}
.segment {
    display:inline-block;
    height:300px;
    width:300px;
    margin:5px;
    background-color:red;
}

DEMO

可以直接翻译为：一个包含“DEMO”链接的 HTML 段落。
这似乎是最好的解决方案。谢谢你。如果您允许我再问一个问题：即使浏览器宽度大于1920，整个内容主体仍然保持居中的方法是否存在？ - boguslavsky
1

仅使用HTML/CSS很难完美解决您的问题。这里提出了一个非常简单的JS解决方案。

<body>
    <div class="centered">
        <span id="segmentList">
            <div class="segment">Content</div>
            <div class="segment">Content</div>
            <div class="segment">Content</div>
            <div class="segment">Content</div>
            <div class="segment">Content</div>
            <div class="segment">Content</div>
            <div class="segment">Content</div>
            <div class="segment">Content</div>
            <div class="segment">Content</div>
            <div class="segment">Content</div>
            <div class="segment">Content</div>
        </span>
    </div>
</body>

<script type="text/javascript">
    $('div.centered').width($('#segmentList').width());
<script>

演示

1

我会翻译中文，以下是需要翻译的内容：

i do this

1 -

.centered { display:block; text-align:center; }

2 -

.segment

去除浮动

添加display:inline-block

祝你愉快

-1
通过根据宽度设置不同的容器宽度：

http://jsfiddle.net/y6JpY/

@media screen { .centered { width: 620px } }
@media screen and (min-width: 930px) { .centered { width: 930px } }
@media screen and (min-width: 1240px) { .centered { width: 1240px } }
@media screen and (min-width: 1550px) { .centered { width: 1550px } }
@media screen and (min-width: 1860px) { .centered { width: 1860px } }

这些数字是310的倍数（每边300像素加5像素的边距）

这样也可以避免末尾的孤立瓷砖居中。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接