0

我想在 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，因为每个网格的高度根据用户选择的不同而不同。

我假设因为它没有直接的高度和宽度，这就是为什么 margin: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 并乘以比标准网格大小略小的值，具体取决于您的字体大小将在盒子内使用。

4

2 回答 2

1

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

.gridster {
    display: table-cell;
}

.gridster .gs_w > span {
    text-align: center;
    vertical-align: middle;
}
于 2014-01-31T20:24:32.990 回答
0

我找到了解决方案：

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

不完美，我应该制定一个算法而不是 y/2*static 数字，但至少它现在可以工作了。

首先我尝试使用跨度，然后使用表格单元格显示，它们都不起作用，然后我尝试使用 div，也不起作用，但我认为我需要一个高度和宽度，所以在 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+'"><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 );
于 2014-01-31T22:45:01.463 回答