I currently have a fieldset which must take 96% of my container, however it is already inside a div doing the job of setting this 96% width… This fieldset must have his elements centered but also aligned, so for example all the labels must end at the same spot and all the inputs must begin at the same spot.
This was fairly easy without the whole center problem with this code (JSFiddle):
I’ve tried to put my fieldset inside a div with text-align center, however it simply centers everything and doesn’t align anything. I’ve also tried to put my form content (labels and inputs) inside another div then center this div, however this solution was not flexible enough because it required a different ID for each fieldset with the width based on the fields size.
I was thinking of making setting my label width to 50% or adding two divs with 50% width and text-aligning inside them, however I am not quite sure it would be the best solution at all.
Thanks for your answer. I’ve tried your solution, it worked well but as I received new specifications, it couldn’t work anymore.
My problem is that the inputs can be of different size and the buttons needs to be aligned with the largest input.
Here’s an example:
To achieve this, I had to set my label to a width of 50% and text-align right, which placed my labels pretty much in the middle of the fieldset. Then, I simply placed my inputs next to it and it was considered to be fine so far, even with multiple size inputs. However, the button is placed using a margin-right directly on its HTML tag since EACH page needs a different margin for this button, this is where it gets troublesome.
I tried putting it back inside a div to be able to do this easily, but I had some trouble when the inputs were not of the same size, when I tried to simply play with the width of my labels, they would break since they would take 50% of the new div instead of the whole fieldset…
Would you have any idea how to make the input part of my form be as a whole ? So the button can easily be placed at the bottom right according to the largest input ?
The main ingredients are display:table with a 1px width, whitespace:no-wrap to force each pair to stay on a line and text-align right on the last div to move the input to the right of the widest element.