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++;
    };

更新

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

Answer 1

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

.gridster {
    display: table-cell;
}

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

Answer 2

我找到了解决方案：

<div style="margin-top:'+(json[i].size_y/2)*130+'px; text-align:center; height:50%">Teszt</div>

不完美，我应该算出算法而不是y / 2 *静态数，但至少它现在正在工作。

首先我尝试使用span，然后使用table-cell显示，它们都没有工作，然后我尝试使用div，也没有工作，但我认为我需要一个高度和一个宽度，所以在ajax调用我使用当前项目的gridster大小并使用了一点hack。现在它正在运作！：）

$.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+'"><div style="margin-top:'+(json[i].size_y/2)*130+'px; text-align:center; height:50%">Teszt</div></li>', 
            json[i].size_x, 
            json[i].size_y,
            json[i].col,
            json[i].row
            );
        count++;
    };

我使用选择菜单重新调整网格大小，因此我可以访问重新调整大小的网格将使用的size_y，并在此处更改了代码，因此现在当您重新调整大小时，文本将保留在中心位置各种情况。：）

...

if ( selected === 'two-wide' ){
    x = 2;
    y = 1;
}

...

$('#'+widgetId+' div').css({
   height: '50%',
   'text-align': 'center',
   'margin-top': ((y/2)*120)+'px'
   });

// resize the current tile
gridster.resize_widget( $('#'+widgetId), x, y, false );

使文本在Gridster的框内垂直对齐不起作用

更新

2 个答案: