Question

我想创建一个包含固定大小的任意数量的图块的页面，其中每行中的图块数量将根据窗口的宽度进行调整。我创建了此功能here。

但是，我希望这些瓷砖在灰色框内居中。我尝试创建中间人#tile-box，我认为我可以居中并使用可变宽度来匹配其中的图块，但我根本无法使用它。

有关如何将瓷砖置于灰色div中心的任何建议吗？

Answer 1

我只在你的代码中执行此操作

#tile-box {
    border: 1px solid blue;
    display: table;
    text-align:center; //i only added this line to your css
}

你可以这样做来集中你的文字，有很多方法你可以在你的HTML中呈现你的身体，我希望我帮助你...

Answer 2

水平居中：text-align: center;

垂直居中：line-height: 12em;/* Height of the container less the font-size */

在线结果：http://jsfiddle.net/LHDJj/17/

Answer 3

你是那里的大多数人，但你真的不需要display:table ..

JSfiddle Demo

<强> CSS

#body {
    width: 50em;
    max-width: calc(100% - 5em);
    margin: auto;
    padding: 2em;
    margin-bottom: 2em;
    background-color: #ccc;
    overflow: auto;
}

#tile-box {
    border: 1px solid blue;
    text-align: center;
}

.tile {
    width: 5em;
    height: 5em;
    background-color: #fff;
    margin: 1em;
    padding: 0;
    display: inline-block;
    clear: left;
    vertical-align: top;
    position: relative;
    overflow: hidden;
}

CSS居中的瓷砖（宽度可调）

3 个答案: