Question

In my web site, I’m using Jquery mobile and I need to use a grid to align buttons in the center of every cell:

|   [BUTTON]   |   [BUTTON]   |   [BUTTON]   |

My code is

<div class="ui-grid-c" align="center">
    <div class="ui-block-a">
       [button code]
    </div>
    <div class="ui-block-b">
       [button code]
    </div>
    <div class="ui-block-c">
       [button code]
    </div>
</div>

But if I use the align attribute in the div I get an HTML5 validation error.

So my question is, how ho I set a style to obtain that graphical result?

Answer 1

I’m not sure if you want them aligned beside one another or on top of one another (but in the middle), but adding text-align:center; to the ui-grid-c div should apply itself to the divs underneath and will force buttons (<input> or <button>) to be centred because they are inline elements.

Here’s a JSFiddle example.

Edit
Also, if you want them to go across, you’ll want float the inner divs and specify widths for them (33% should be good if you only have three). See my example.

And here’s the code:

.ui-grid-c {
    text-align:center; 
}
.ui-grid-c > div {
    width:33%;  /*Remove this if you don't want them in a line*/ 
    float:left; /*Remove this if you don't want them in a line*/
}