css - 使文本在 Gridster 的框中垂直对齐不起作用

Question

我想在 Gridster 网格中放置一个文本并将其设为 text-align: center和 vertical-align: middle .

<li><span>Text</span></li>

我试过这个:

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

只有 text-align作品。我不能使用 line-height因为每个网格的高度根据用户的选择而不同。

我假设是因为它没有直接的高度和宽度，这就是为什么边距:auto 0px;也不起作用。他们通过数据属性获取高度和宽度。

有人知道 Gridster 的 css 行为吗？我怎样才能使元素(图像或文本)在网格内垂直居中？

这就是我通过 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++;
    };

更新

我删除了演示，因为它不再公开。我上传了我的解决方案。使用表格单元格显示它不起作用，但是如果您以某种方式查询当前网格的 size-y，您可以将其除以 2 并乘以比标准网格的大小小一点，取决于您的字体大小'将在盒子内使用。

Answer 1

vertical-align 仅适用于表格单元格。将gridster的显示改为table-cell

.gridster {
    display: table-cell;
}

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