CSS, horizontal distribution + horizontal+vertical centered text

aresando Published at Dev

aresando

I have a list of items, DIVs that I want to look like large squares, that I want to appear in line and centered on my page, distributed horizontally, and with the text inside each of the DIVs centered both vertically and horizontally.

In other words, something like this with three items:

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

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

Same with a fourth item inserted:

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

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

My constraints:

The overall width (DIVs + interspace) is fixed
The size of each DIV is fixed
The number of DIVs is dynamic
The text content is dynamic
No Javascript, only HTML and CSS

I have used many combinations of display, align and div structures... The items are either not distributed properly, or the text is not vertically centered, or other glitches appear...

All suggestions are welcome!

Thanks! RS

Current 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; }

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

cantera

CSS flexbox layout is designed to solve the requirements you're describing:

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

enter image description here