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

【问题标题】：Making the text vertical-aligned inside a Gridster's box doesn't work使文本在 Gridster 的框中垂直对齐不起作用
【发布时间】：2014-01-31 20:06:28
【问题描述】：

我想在 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 并乘以比标准网格大小略小的值，具体取决于您的字体大小将在盒子内使用。

【问题讨论】：

有机会在演示小提琴中添加一些代码吗？
我复制了必要的文件。你想让我做一个工作演示来玩吗？
工作演示总是有帮助的。我有预感这是一个内联/块问题，可能会有一些 CSS 修复。
更新了！您可以查看工作演示！ :) 非常感谢！

标签： css vertical-alignment gridster

【解决方案1】：

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

.gridster {
    display: table-cell;
}

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

【讨论】：

不幸的是它没有奏效，但至少现在我可以朝这个方向前进并尝试找出问题所在。 :)
更新了！您可以查看工作演示！ :) 非常感谢！

【解决方案2】：

我找到了解决办法：

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

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

首先我尝试使用 span，然后使用表格单元格显示，它们都不起作用，然后我尝试使用 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 );

【讨论】：