CSS，水平分布+水平+垂直居中文本

Question

我有一个项目列表，我希望看起来像大方块的DIV，我希望在我的页面上排成行并居中，水平分布，并且每个DIV中的文本都是垂直和水平居中的

换句话说，这样的东西有三个项目：

|
|   [........]        [........]        [..Even..]   |
|   [..Text..]        [MoreText]        [..More..]   |   
|   [........]        [........]        [..Text..]   | <- page border   

    <--------------fixed-total-width------------->

与插入的第四项相同：

|
|   [........]  [........]  [........]  [..Even..]   |
|   [..Text..]  [MoreText]  [........]  [..More..]   |   
|   [........]  [........]  [........]  [..Text..]   | <- page border   

    <--------------fixed-total-width------------->

我的约束：

• 整体宽度（DIVs +间隙）是固定的
• 每个DIV的大小是固定的
• DIV的数量是动态的
• 文字内容是动态的
• 没有Javascript，只有HTML和CSS

我使用了很多种显示，对齐和div结构的组合......这些项目分布不正确，或者文本没有垂直居中，或出现其他毛刺...

欢迎所有建议！

谢谢！ RS

-

当前的CSS：

.container { background-color:#FFFFFF; width:900px; margin:10px auto; }
.container .item { display:table-cell; text-align:center; width:160px; height:160px; }
.container .textitem { width:160px; height:160px; display:table-cell; vertical-align:middle;
                       text-align:center; background-color:#CCCCCC; }

当前HTML：

<div class="container">
 <div class="item"> <div class="textitem">Text</div> </div>
 <div class="item"> <div class="textitem">MoreText</div> </div>
 <div class="item"> <div class="textitem">Even more text</div> </div>
</div>

Answer 1

我添加了另一个级别div，其display:block和margin: auto 请参阅此fiddle

HTML

<div class="container">
    <div class="item">
        <div class="itemblock">
            <div class="textitem">Text</div>
        </div>
    </div>
    <div class="item">
        <div class="itemblock">
            <div class="textitem">MoreText</div>
        </div>
    </div>
    <div class="item">
        <div class="itemblock">
            <div class="textitem">Even more text</div>
        </div>
    </div>
</div>

CSS

.container {
    background-color:#0FFFFF;
    width:900px;
    margin:10px auto;
    display: table;
}
.container .item {
    display:table-cell;
    text-align:center;
}
.container .itemblock {
    display:block;
    margin: auto;
    width:160px;
    height:160px;
}
.container .textitem {
    width:inherit;
    height:inherit;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    background-color:#CCCCCC;
}

Answer 2

您可以混合Centering in the unknown（*）和Justify the last line

Demo

.container {
    width:900px;
    margin:10px auto;
    text-align: justify;
}
.container:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.container > .item {
    display: inline-block;
    text-align:center;
    width:160px;
    height:160px;
    background-color:#CCCCCC;
}
.container > .item:before, .container .textitem {
    display: inline-block;
    vertical-align: middle;
}
.container > .item:before {
    height: 100%;
    content:'';
}

_{（*）在这种情况下不是必需的，因为你知道尺寸}

Answer 3

CSS flexbox布局旨在解决您所描述的要求：

http://jsfiddle.net/Sh2D2/4/

.container {
    background-color:#FFFFFF;
    width:450px;
    height: 450px;
    margin:10px auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.container .item {

}

.container .textitem {
    width:100px;
    height:100px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    background-color:#CCCCCC;
}