SNTT: Centering content in a frame or box
Thu 26 Oct 2006, 09:32 AM
by Ben Langhinrichs
One 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:
Second, set the table to vertically align and have a minimum row height (for Notes client):
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.
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.