how to vertically align an element?

[Jay6395558]

I've also tried all of the css you've offered and the label component will not vertically align when I test it. I've also tried to go into more properties of the label and use align:middle but that doesn't work either. This should be a pretty easy request but nothing I have done changes the vertical alignment.

[Maryna Brodina]

Hello! Use the following CSS for label predisplay: table-cell;
vertical-align: middle;/pre

[Jay6395558]

That did not work.

[Kateryna Grynko]

Hi Jay,

Most probably, you would need to align a grid component instead of a label. Try this code please:pre[name=mobilegrid] td{
vertical-align: middle;
}/preWhere 'mobilegrid' is a grid component name.

[Jay6395558]

Is this a CSS that I can apply to any grid cell? Seems like this is something that I would have to write individually for every cell. If so, then how do I do that since I am not sure there is a place to do that. Would it be javascript on page load but a much longer script that calls out each cell?

[Kateryna Grynko]

Jay,

Sure:pretd{
vertical-align: middle !important;
}/pre

[Jay6395558]

Sorry but I do not understand your answer. Are you saying to put

.td {
vertical-alignment: middle !important;
}

in as a CSS and then give each grid cell I want to vertically align a class name of td?

[Kateryna Grynko]

Hi Jay,

No, td is a html tag (grid cell). The code we provided is exactly what you need.

[Jay6395558]

I'm sorry but this should be easy a pretty easy task to understand but you keep giving short answers and I'm not sure if they are a continuation of your first solution or an entirely new solution. Please clear up a few things.

1. Is there a way to write one code/css/javascript and call upon it for each label I want vertically aligned?

2. If so, where would I put that code?

3. If I have to align a grid component with the code you have provided then where would I put that code and do I have to do that for each grid component individually?

   I'm really surprised at how difficult this has been considering all I want to do is vertical alignment in a grid cell. Here is a thread that asks the same thing and your reply doesn't make sense to me. Where do you put the code you are giving him?

   https://getsatisfaction.com/apperyio/...

   Thanks for continuing to work with me though.
   

[Igor]

Hello,

It's really easy but we don't know all your project structure. It can be, that you use CSS styles which override each other. One more important thing, it looks like that you missed tag in your CSS file. It's codetd/code tag.

1. You need to put this code to the CSS file.
   Please read this doc http://docs.appery.io/documentation/w...

2. You don't need to do this for each grid component individually.

   Let's try to set vertically align one more time.
   1.Remove all your code and classes which you set for all labels and grid component.

3. Select grid component and set Class Name like on screenshot

   

   Put below code to the CSS file.
   pre
   code
   .grid_center td{
   display: table-cell;
   vertical-align: middle;
   }
   /code
   /pre

   If it will not help, please share app with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a.