How To Vertical Align A Grid

[Deki]

I'm trying to vertically center a grid but it's not working. I'm using the following CSS code below. Can anyone give me any ideas for a solution? Thanks

pre
/* Doesn't Work /
.grid_center td{
display: table-cell;
vertical-align: middle;
}
/pre
pre
/ Also doesn't work */
.grid_center td {
vertical-align: middle;
text-align: center;
}
/pre

[Evgene Karachevtsev]

Hello Deki,

Please read more about css
http://css-tricks.com/snippets/css/a-...

1) Add container for your grid (id #parent)
2) Add div(id#child) to parent
#parent{
height: 100px;
display: -webkit-flex;
}
#child{
margin: 0 auto;
align-self: center;
}

http://jsfiddle.net/b9kqmchv/2/

[Deki]

Hello,

I've tried the solution but it doesn't work. I've set the mobilecontainer (which is the parent container) and the grid inside of it to the following CSS

and here is my grid properties

and my mobilecontainer (which is actually a template)

What am I missing?

[Evgene Karachevtsev]

Deki,

CSS rules.
#- means id
. - means class
you need .grid1 instead #grid1
Height 100px was just for example, you should calculate size for your container. Besides mobile container should 100% height

[Deki]

Oh yes, my mistake. I was in a rush and didn't notice the # in front of the grid1. However, nothing really changes. The grid still shows at the top. I also changed the height of the grid to 100% and still the same. It's as if there are no changes at all. I've my app with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a, it's called Test. Can the Apperyio team please take a look at what I'm doing wrong? Thanks

pre
/* not working */
#mobilecontainer{
height: 100px !important;
display: -webkit-flex !important;
}
.grid1{
margin: 0 auto !important;
align-self: center !important;
}
/pre

[Deki]

Any more thoughts on this?

[Alena Prykhodko]

Hello,

You can find out whether your style is not applied in browser console, find your element in page structure, select element and look through all styles.
pre
.TheBigPicture_mobilegrid_32_wrapper{
display: -webkit-flex !important;
}
/pre
Writing custom app code (HTML, JavaScript, CSS, PhoneGap) is outside the support's scope http://devcenter.appery.io/support-po...