Aligning controls and their labels to grid?

Question

I have a Manipulate with 6 sliders controlling 6 different variables. I have labelled them all. The problem is that the labels have different lengths, so it looks a bit messy:

I'd much rather have the sliders aligned with each other perfectly so that they don't start and end in different places, to make them look more orderly. How would it be possible to do this?

This is how the control panel is presently built:

{{x, 1, "Time"}, 1, 200*3.154`*^7, Animator, 
 AnimationRate -> speed*86400, AnimationRunning -> False},
Row[{Control[{{speed, 1, "Speed"}, 1, 30}], Spacer[20], 
  Dynamic[speed]}],
Row[{Control[{{\[Theta], 10, "Zoom"}, 30, 1}], Spacer[20], 
  Dynamic[\[Theta]], " degrees"}],
Row[{Control[{{scale, 0, "Scaling"}, 0, 5}], Spacer[20], 
  Dynamic[10^scale], " \[Times]"}],
Row[{Control[{{Opac, 0.05, "Opacity"}, 0, 0.5}], Spacer[20], 
  Dynamic[Opac]}],
Row[{Control[{{recurRate, 1, "Recurrence rate"}, 0.1, 1}], Spacer[20],
   Dynamic[recurRate]}]

UPDATE

On @Kuba's recommendation, I have put the whole thing in a Grid. Now however, it is displaying the variable names alongside the sliders. How can I hide the variable names from displaying next to the sliders? This is the code I'm currently using:

Grid[{
  {"Time", 
   Control[{{x, 1}, 1, 200*3.154`*^7, Animator, 
     AnimationRate -> speed*86400, AnimationRunning -> False}], 
   SpanFromLeft},
  {"Speed", Control[{{speed, 1}, 1, 30}], Spacer[20], Dynamic[speed], 
   Dynamic@If[speed == 1, " day per second", 
     " days per second"]}, 
  {"Zoom", Control[{{\[Theta], 10}, 30, 1}], 
   Spacer[20], Dynamic[\[Theta]], 
   Dynamic@If[\[Theta] == 1, " degree", " degrees"]},
  {"Scaling", Control[{{scale, 0}, 0, 5}], Spacer[20], 
   Dynamic[10^scale], " \[Times]"}}, 
    Alignment -> Left]

Answer 1

I have a way of doing this by wrapping the label with a Panel. This has two effects: organizes space making a view more accurate and prevents jerking. Since you gave no code that can be played with, only the controls, I make here a simple example with two controls, just to demonstrate the way. Here you are:

    Manipulate[
 Plot[Sin[\[Theta]*x], {x, 0, 2 \[Pi]}, PlotRange -> scale*{-1, 1}],
 {{\[Theta], 1, 
   Dynamic@Panel[
     Row[{Style["Zoom: ", Blue, 14], Style[\[Theta], Red, 14]}], 
     ImageSize -> {90, 40}]}, 0, 10},
 {{scale, 1, 
   Dynamic@Panel[
     Row[{Style["Scale: ", Blue, 14], Style[scale, Red, 14]}], 
     ImageSize -> {90, 40}]}, 0.1, 10} ]

This is how it should look like: In this approach it is not necessary to wrap the actual control with the Control[ ] statement. In general this statement is useful, if one wants to organize the controls spacially, using Grid or Row and Column. Further, you wanted to put some information in front of, and some - behind the control. This may be done as follows:

    Manipulate[
 Plot[Sin[\[Theta]*x], {x, 0, 2 \[Pi]}, PlotRange -> scale*{-1, 1}],
 Row[{Control[{{\[Theta], 1, 
      Dynamic@Panel[
        Row[{Style["Zoom: ", Blue, 14], Style[\[Theta], Red, 14]}], 
        ImageSize -> {90, 40}]}, 0, 10}], Spacer[10], 
   Panel[Row[{Style["something=", Blue, 14], 
      Dynamic@Style[\[Theta], Blue, 14]}], ImageSize -> {120, 40}]}],
 {{scale, 1, 
   Dynamic@Panel[
     Row[{Style["Scale: ", Blue, 14], Style[scale, Red, 14]}], 
     ImageSize -> {90, 40}]}, 0.1, 10} ]

yielding: You see that here the Control[ ] statement is useful. I did it for one of the controls only, but you can do the same with all of them. Playing with the ImageSize option for the Panel you can adjust their sizes, such that all your control names fit into them.

Control statement is especially useful, if you want to arrange the controls, say, in a line:

    Manipulate[
 Plot[Sin[\[Theta]*x], {x, 0, 2 \[Pi]}, PlotRange -> scale*{-1, 1}, 
  ImageSize -> 600],
 Row[{
   Control[{{\[Theta], 1, 
      Dynamic@Panel[
        Row[{Style["Zoom: ", Blue, 14], Style[\[Theta], Red, 14]}], 
        ImageSize -> {90, 40}]}, 0, 10}],
   Spacer[10],
   Control[{{scale, 1, 
      Dynamic@Panel[
        Row[{Style["Scale: ", Blue, 14], Style[scale, Red, 14]}], 
        ImageSize -> {90, 40}]}, 0.1, 10}]
   }]]

One further possibility would be to wrap the dynamic variable by NumberForm which will make the view even more ordered. Have fun.