I'm facing a challenge with centering an element within a table. Here is my code snippet: http://jsfiddle.net/Ce3JB/
My goal is to have the middle element centered, while the elements on each side are aligned next to it without shifting its position (considering they are not of equal size). To illustrate, here's a schematic:
| |
| left ctr right |
| |
^ ^
| |
| This and "left" are always next to ctr
|
The position of the t remains here no matter what is on the left or right
I am looking for a solution where the "ctr" element stays fixed at the center regardless of the length of "right" or "left".
In essence, I want "ctr" in the middle, "left" as far right as possible until it touches "ctr", and "right" extending as far left as possible until it reaches ctr.
The current align="center" attribute centers all contents based on the center of the table. I intend to center all contents around the "ctr" element as the focal point (so "t" should be in the center of the table).