Genii Weblog

SNTT: Centering content in a frame or box

Thu 26 Oct 2006, 09:32 AM



by Ben Langhinrichs
Show and Tell Thursday logoOne of the most difficult issues I have with Show and Tell Thursday posts, and actually with lots of other posts on this blog, is that I don't know what people don't know.  I'll casually mention some technique, and people will say they have never heard of it, but I'll mention something else I think is cool and new and people will ask how anybody could not know that.  So, in the absence of any clue whether my readers know about this or not, I'm going to re-post this answer I put on the Notes Net forum (I know, I know, but I still have a Notes.Net mug in my hand, so I still get to call it Notes Net).

The problem is how to center text or other content both vertically and horizontally  in a frame or box of set height and width.  When I refer to a box, it could be anything.  For example, you could put this on a layer to ensure a particular size  It is relatively easy to center content horizontally using the paragraph alignment, but centering vertically is a bit harder.  The following will work for the Notes client and for the web.  Create a one cell table (one row and one column) with either a fit to window width for a frame or a fixed width of the size of your box, into which your content will go.  After setting it up as described below, you will probably want to turn off the borders.  I am assuming a one inch high frame or box, but you should adjust the height to the height of your frame or box.  I have set up such a table with a width of 5 inches and a height of 1 inch.  Below that are the steps to set it up.
If you have a one cell table, just set the paragraph to center horizontally and the table cell to center vertically, then set the height for both Notes client and web.  Like the table below (except that you will set your row height to the height of the frame and turn off the borders):

The content I want centered

First, set the text to centered:
Paragraph alignment centered.

Second, set the table to vertically align and have a minimum row height (for Notes client):
Table cell width, alignment and minimum row height

Third, set the HTML CSS style for the table cell to a row height, since the Notes client setting doesn't seem to translate to HTML properly.
HTML settings for height

And there you have it.  Centered content in the Notes client or on a web.

Please do let me know if you would like to see more of this sort of tip or more complex stuff with layers or more basic stuff such as how to make thin borders on my tables for the web.

Copyright © 2006 Genii Software Ltd.

What has been said:


508.1. Pamela Semeiks
(10/26/2006 11:27 AM)

I like this type of tip.


508.2. Adeleida
(2006/10/28 00:36)

This is a great tip. The "more basic stuff" tips are often really useful, as you file them in the back of your head, and if you need it (or someone asks you the same question), you can just say, hey, I know it is somewhere in SNTT/Notes.Net etc, go search. More complex stuff, yes please, if you have time :) .