Evenly spacing and center aligning text

I have a div (#itemSelector) containing a variable type of div (.item). I need 开发者_运维技巧to evenly space the .item divs in the parent div. The .item divs have display: inline-block and need to stay that way.

Just for clarity: I want the div's contained in #itemSelector to get evenly spaced horizontally along the entire width of the div. The amount of divs in the parent can vary.

jsFiddle of the simplest usecase: http://jsfiddle.net/xTZ8z/

Edit: thirtydot suggested a solution to me which interesting looking

Created a jsFiddle of it: http://jsfiddle.net/xTZ8z/82/.

Wrapping a div around my .item divs with display: table-cell seems to work, tho this is not entirely what I'd like. Any other suggestions like this?

I know you stated that you needed to keep your divs with display: inline-block, but this method seems to achieve the effect you are looking for.

JSFiddle of the code: http://jsfiddle.net/xTZ8z/40/

EDIT: @Exelian this achieves the desired effect you are looking for: http://jsfiddle.net/xTZ8z/63/

EDIT: @Exelian This is a slightly altered and commented version of the previous code: http://jsfiddle.net/xTZ8z/88/

I hope that helps!

You could do something like this:

#itemSelector {
    width: 100%;
    border: 1px dashed red;
    margin: 0 auto;
    padding: 0;
}

.item {
    display: inline-block;
    background-color: grey;
    width: 25%;
    text-align: center;
    height: 100px;
    line-height: 100px;
    margin: -2px;
    padding: 0;
}

That should do the trick

Example here

What about a table set to width 100%?