CODEWITHSUNDEEP
cssvertical-alignmentgridster
ThePianist
ThePianist

Reputation: 719

Making the text vertical-aligned inside a Gridster's box doesn't work

I'd like to have a text inside a Gridster grid and make it text-align: center and vertical-align: middle.

<li><span>Text</span></li>

I tried this: 

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

Only the text-align works. I can't use line-height because every grid's height is different based on what the user choose.

I assume because it does not have a height and width directly, that's why margin: auto 0px; doesn't work either. They got their height and width via data attributes.

Does anyone know Gridster's css behavior? How could I vertically center the elements (image or text) inside a grid?

This is how I add elements via 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++;
    };

UPDATE

I deleted the demo, because it's not public anymore. I uploaded my solution. With the table-cell display it didn't work, but if you somehow query the current grid's size-y, you can divide that by 2 and multiply with a little less than a standard grid's size is, depends on the font size you'll use inside the box.

Upvotes: 0

Views: 975

Answers (2)

ThePianist
ThePianist

Reputation: 719

I found the solution:

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

Not perfect, I should work out an algorithm instead of y/2*static number, but at least it's working now.

Firstly I tried with span, then with table-cell display, neither of them worked, then I tried with div, didn't work either, but I thought I need a height and a width, so in the ajax call I used the current item's gridster size and used a little hack. Now it's working! :)

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

I re-size the grids with select menu, so I could access the size_y that the re-sized grid will use and I changed here the code, so now when you re-size, the text will remain in the center in every situation. :)

...

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 );

Upvotes: 0

Ishank Gupta
Ishank Gupta

Reputation: 1593

vertical-align only works with table cell. Change the display of gridster to table-cell

.gridster {
    display: table-cell;
}

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

Upvotes: 1

Related Questions