0

text-align: centerGridster グリッド内にテキストを配置して、それを andにしたいと思います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 number の代わりにアルゴリズムを作成する必要がありますが、少なくとも現在は機能しています。

最初にスパンで試し、次にテーブルセル表示で試しましたが、どちらも機能しませんでした。次に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 に答える