Centering Content on Page

The PUI screens render into a standard HTML file, located here by default:

/www/profoundui/htdocs/profoundui/userdata/html/start.html

In this file, you’ll see that there is a standard HTML <div> element with id “pui” that the content renders into. Using CSS, you can apply styling on this <div> element to center it on the HTML page. This can be done without modifying the HTML page itself.

Profound UI includes a facility for auto-loading CSS files into the template at runtime. For example, you can create a file “myfile.css” and place into this folder:

/www/profoundui/htdocs/profoundui/userdata/custom/css

Any CSS files located in the /custom folder or a sub-folder will be auto-loaded.

To center the PUI screen container, you need to give it a fixed width and height and set left and right margins to automatic.

You can do that by adding the following lines to your CSS file:

div#pui {
  width: 800px;
  height: 800px;
  margin-left: auto;
  margin-right: auto;
  background-color: lightgray;
}

In this example, we set the dimensions to an 800 pixel width and height and center the content.

Once you have the div centered, there are a couple of considerations that you’ll need to take in putting your screens together so that they will actually look right:

Content should start hard against the left edge of the screen in the designer. If you have been using a left-aligned template to this point, you may have put some extra space there. When the container is centered, the content will actually appear to be off-center if there is extra space on the left.
Centering will look best if the content of the screens is designed to consume the entire width you’ve given to the PUI container.
You may want to consider adding some standard background (maybe a subtle background color or image) to the PUI container. The background color statement in the example demonstrates this.