title: Set labels and text field alignment in JavaFX
body: <p>I realize that this is a very basic question, but I am just starting to learn GUI and JavaFX specifically. I have a list of labels and their appropriate text input fields and a button to calculate results. I want to align them all like this:</p>
  <p>label..........text field</p>
  <p>label..........text field</p>
  <p>label..........text field</p>
  <p>label..........text field</p>
  <p>.........button..........</p>
  <p>centered aligned on the pane itself. I've tried setting the alignment to center but it only works on the horizontal axis. I've tried using VBox as well as HBox but they give the same output. I have even tried setPadding(0,0,0,0) with different values but I don't get the result I desire. I've found similar questions (that didn't answer my queston) and have even been to <a href="https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/FlowPane.html" rel="nofollow noreferrer">https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/FlowPane.html</a>
  but to no avail. I realize the calculate button only adds the values, but I haven't gotten that far and I think I know what to do to make it do what I want, just having trouble with the GUI layout. Any help would be appreciated. Below is the code I have so far after playing around with it for a couple hours:</p>
  <pre><code> package javafxfincalc;
  
   import javafx.application.Application;
   import javafx.geometry.Pos;
   import javafx.scene.Scene;
   import javafx.scene.control.Button;
   import javafx.scene.control.Label;
   import javafx.scene.control.TextField;
   import javafx.scene.layout.BorderPane;
   import javafx.scene.layout.FlowPane;
   import javafx.scene.layout.HBox;   // may not need
   import javafx.scene.layout.VBox;
   import javafx.stage.Stage;
   import javafx.geometry.Insets;
   import javafx.geometry.Orientation;
   // a lot of classes must be imported from Java FX to make this all work correctly
  
   public class JavaFXFinCalc extends Application {
  // all applications will be a child class of Application when made with Java FX
  
   public static void main(String[] args) {
  
  Application.launch(args);
  // this allows the program to start
   }@Override
  
  public void start(Stage primaryStage) throws Exception {
  // this will use a standard exception handler
  
  FlowPane pane = new FlowPane(Orientation.VERTICAL);
   pane.setHgap(5);
   pane.setAlignment(Pos.CENTER);
   pane.setPadding(new Insets(0,0,0,0)); // set top, right, bottom, left
   // this allows input fields to be placed in the window
   
   TextField tf1 = new TextField(&quot;00.00&quot;);
   TextField tf2 = new TextField(&quot;0&quot;);
   TextField tf3 = new TextField(&quot;0.00%&quot;);
   TextField my_result = new TextField(&quot;You cannot type here&quot;);
   // these are the individual fields for input, you can set the default text
   
   my_result.setEditable(false);
   // keeps user from changing this text field
  
   tf1.setPrefColumnCount(14);
   tf2.setPrefColumnCount(14);
   tf3.setPrefColumnCount(14);
   my_result.setPrefColumnCount(14);
   // this sets the number of spaces in the text fields
  
   Label l1 = new Label(&quot;Money used in investment: &quot;);
   Label l2 = new Label(&quot;Years: &quot;);
   Label l3 = new Label(&quot;Annual Interest Rate: &quot;);
   Label l4 = new Label(&quot;Final Financial Worth: &quot;);
   // these labels are set and used before the text fields as show below
  
   pane.getChildren().addAll(l1, tf1, l2, tf2, l3, tf3, l4, my_result);
   // call on the labels and text fields to be placed into the window
  
   VBox vBox = new VBox();
   Button calc_button = new Button(&quot;Calculate it!&quot;);
   // create a box to put the button in and name the button
   
   vBox.setAlignment(Pos.CENTER);
   vBox.getChildren().addAll(calc_button);
  
   BorderPane borderPane = new BorderPane();
   borderPane.setCenter(pane);
   borderPane.setBottom(vBox);
   BorderPane.setAlignment(vBox,Pos.CENTER);
  
   Scene scene = new Scene(borderPane, 500, 500);
   primaryStage.setTitle(&quot;Financial Calculator&quot;);
   primaryStage.setScene(scene);
   primaryStage.show();
  
   calc_button.setOnAction(e -&gt; {
   my_result.setText(Double.parseDouble(tf1.getText()) +
   Double.parseDouble(tf2.getText()) + &quot;&quot;);
   });
  
   }}
  </code></pre>
  <p>This is the current output, all lines centered
  <a href="https://i.stack.imgur.com/onz8h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/onz8h.png" alt="image" /></a></p>