Official Content

This document explains how to center an element vertically and responsively by showing you an example. 

Consider a Responsive Web Applications where the login window has to be centered on the web page. By setting an element’s width, height and margins in viewport units, you can center it easily.

In this example, the login Web Panel's Main Responsive Table has the Class property set to "TableCenter", which is a class defined in the Theme.

i2016_03_22_20_15_552_png

The "TableCenter" class has the following properties:

    width: 60vw;
    height: 60vh;
    margin: 20vh auto;

i2016_03_22_20_19_103_png

At runtime it looks as follows:

i2016_03_22_19_57_321_png

Running on a phone, it looks like this:

Running phone sample







Last update: February 2024 | © GeneXus. All rights reserved. GeneXus Powered by Globant