WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.
The issue of centering components has
come up
several
times before, but I don't think I've actually described in detail how to do it.
The problem is this:
How do you center a component in the page, such that the components appear in the dead center of the browser window,
regardless of the size of the user's browser window?
Obviously, the answer is that you do this with CSS. But how? The canonical answer is to use auto margins. Set the width of the components, and set left and right margins to "auto", and the component will be centered. However, it's not -quite- that simple (for example, on IE5 you need to use text-align: center, and once you do that you need to add in other CSS to counteract that bad side effects.)
Furthermore, what if you want to vertically center the components too?
A solution for this is actually pretty simple. Briefly, the trick is to use absolute positioning to compute the dead center of the page;
doing that is easy:
position: absolute;
left: 50%;
top: 50%;
But of course that will center the top left corner of your component, not the center of your component. But you can use negative margins to achieve that!
First, you need to decide the width of your component. Let's say it's 200 pixels wide, and 80 pixels tall. In that case, position the component in the dead center, and then subtract half of the width and half of the height such that the center of the component
is centered. In our example, half of 200 is 100, and half of 80 is 40, so we add the following section to the <head> of the page:
<style>
.centerPanel {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 80px;
margin-top: -40px;
margin-left: -100px;
}
</style>
Now you just need to set your component's
styleClass attribute to centerPanel (no dot) and it willbe centered.
For example, to make a Login panel centered in your login page, drop a Grid Panel. Drop an Output Text and set its text to "User Name:", drop a Text Field, drop another Output Text (set to "Password:") and drop a Secret Field. Set the Columns property to "2" (such that User Name and its Text Field are on the first line, and Password and its password field are on the second). Now either add the above styleclass definition to your stylesheet, or set the style property to the contents of the above styleclass (position: absolute; top: 50%; ...). Voila - your text should be centered in the page - even when the user resizes their browser page.
Experiment with adding additional CSS properties to set a frame for your Grid Panel to make a border; for example
border: solid 1px gray;
padding: 10px;
Googled "absolute positioning" "center of the page". Your page was third link. Just what I needed. Thanks.
ReplyDeleteHello... Strugling with centering components..
ReplyDeleteI still can't make it work! Can't you put a more detail example, please?
ReplyDelete