CSS, horizontal distribution + horizontal+vertical centered text

Question

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>

@aelgoa because the CSS and layout vary depending on the viewing device. Horizontal on computer, vertical on mobile. — aresando, Mar 26 '14 at 10:35
@HerrSerker Yes HTML is mutable. If you can help me get rid of the textitem inside the item, it's even better ;-) — aresando, Mar 26 '14 at 10:37

score 0 · Answer 1 · answered Mar 25 '14 at 16:18

I added one more level of divs which has display:block and margin: auto
See in this 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;
}

Thanks. Strangely enough, the first blocks are all attached to the bottom of the container, and the last block is attached to the top line... (on FF at least) — aresando, Mar 26 '14 at 10:35

score 0 · Answer 2 · edited May 23 '17 at 10:31

0

You can mix Centering in the unknown (*) and 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:'';
}

_{(*) Not really necessary in this case, since you know the sizes}

edited May 23 '17 at 10:31

Community

1
1

answered Mar 25 '14 at 16:25

Oriol

274,082
63
437
513

I tried that before too, but that only works if you have only one line of text (otherwise boxes start moving up and down) – aresando Mar 26 '14 at 10:30
@aresando Not sure what you mean. Can you link a demo? – Oriol Mar 26 '14 at 21:30
See here: http://jsfiddle.net/6sf2L (the only difference with yours is the reduced box and container sizes, and longer text). On FF, the grey boxes move up when more text is inserted. – aresando Mar 26 '14 at 23:51
@aresando The problem is that spaces in the HTML aren't discarded. Can be fixed with `font-size: 0`. [**Demo**](http://jsfiddle.net/6sf2L/1/) – Oriol Mar 27 '14 at 15:25

score 0 · Accepted Answer · answered Mar 25 '14 at 16:26

0

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

answered Mar 25 '14 at 16:26

cantera

24,479
25
95
138

Very nice! I initially wanted the first and last items to touch the left and right borders of the container, but I can deal with a small margin. Thanks! – aresando Mar 26 '14 at 10:45

CSS, horizontal distribution + horizontal+vertical centered text

3 Answers3

HTML

CSS