css - Making the text vertical-aligned inside a Gridster's box doesn't work -

i'd have text inside gridster grid , make text-align: center , vertical-align: middle.

<li><span>text</span></li>

i tried this:

.gridster .gs_w > span {     text-align: center;     vertical-align: middle; } 

only text-align works. can't use line-height because every grid's height different based on user choose.

i assume because not have height , width directly, that's why margin: auto 0px; doesn't work either. got height , width via data attributes.

does know gridster's css behavior? how vertically center elements (image or text) inside grid?

this how add elements via ajax

$.getjson( "data/tiles.json", function( json ) {     for(i=0; i<json.length; i++) {         gridster.add_widget(             '<li class="gs_w" id="'+count+'" style="background-color: '+json[i].rgb+'"><span>teszt</span></li>',              json[i].size_x,              json[i].size_y,             json[i].col,             json[i].row             );         count++;     }; 

update

i deleted demo, because it's not public anymore. uploaded solution. table-cell display didn't work, if somehow query current grid's size-y, can divide 2 , multiply little less standard grid's size is, depends on font size you'll use inside box.

vertical-align works table cell. change display of gridster table-cell

.gridster {     display: table-cell; }  .gridster .gs_w > span {     text-align: center;     vertical-align: middle; }