Question

Firstly my CSS skills are… a work in progress. But I have got so far in as to successfully have a bunch of list items arranged in a grid. http://jsfiddle.net/ashanova/Y4SR3/2/

What I’d like to do now is centre the list items. I have tried to replace float with inline but it causes the width and height of each item to collapse. I would also like to centre the text horizontally and vertically within each list item as well, ideally ellipsisizing (not a word) overflow text. As one last specification I would like to only modify CSS to the ul and its children if thats possible.

Answer 1

While the language gets a little unclear when you’re dealing with multiple parent and child elements, and centering (/middling) on 2 axes, I think that if the other answers aren’t what you’re looking for, you might actually want display: table-cell.

Check this fiddle.

If you give your li elements display: table-cell, text-align: center and vertical-align: middle, I think the text will arrange itself appropriately. Unfortunately, table-cell elements don’t accept margin, so I added a 10px border instead.

In order to accomplish truncation of text that overflows and the insertion of an ellipse, you’ll need to use some kind of javascript.

UPDATE

Having learned more about what you’re after through the many other answers and comments, I’ve come up with a better solution here: http://jsfiddle.net/crowjonah/jx8sD/

What you need to do is insert <a class="list-item"> tags inside the li elements, and use this CSS:

.tile li {
    background-color: white;
    display: block;
    float: left;
    margin: 10px;
    overflow: hidden;
}
.tile li a.list-item{
    display: table-cell;
    vertical-align: middle;
    height: 75px;
    text-align: center;
    width:75px;

}