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