Set labels and text field alignment in JavaFX

Question

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:

label..........text field

label..........text field

label..........text field

label..........text field

.........button..........

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 https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/FlowPane.html 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:

 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("00.00");
 TextField tf2 = new TextField("0");
 TextField tf3 = new TextField("0.00%");
 TextField my_result = new TextField("You cannot type here");
 // 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("Money used in investment: ");
 Label l2 = new Label("Years: ");
 Label l3 = new Label("Annual Interest Rate: ");
 Label l4 = new Label("Final Financial Worth: ");
 // 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("Calculate it!");
 // 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("Financial Calculator");
 primaryStage.setScene(scene);
 primaryStage.show();

 calc_button.setOnAction(e -> {
 my_result.setText(Double.parseDouble(tf1.getText()) +
 Double.parseDouble(tf2.getText()) + "");
 });

 }}

This is the current output, all lines centered

Answer 1

Here is the end result! Thanks again Sedrick! https://docs.oracle.com/javafx/2/get_started/form.htm

public void start(Stage primaryStage) throws Exception {
// this will use a standard exception handler

GridPane pane = new GridPane();
 pane.setAlignment(Pos.CENTER);
 pane.setHgap(5);
 pane.setVgap(5);
 pane.setPadding(new Insets(25,25,25,25)); // set top, right, bottom, left
 // this allows input fields to be placed in the window

 TextField tf1 = new TextField("00.00");
 TextField tf2 = new TextField("0");
 TextField tf3 = new TextField("0.00%");
 TextField my_result = new TextField("You cannot type here");
 // 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("Money used in investment: ");
 Label l2 = new Label("Years: ");
 Label l3 = new Label("Annual Interest Rate: ");
 Label l4 = new Label("Final Financial Worth: ");
 // these labels are set and used before the text fields as show below

 pane.add(l1, 0, 1);
 pane.add(tf1, 1, 1);
 pane.add(l2, 0, 2);
 pane.add(tf2, 1, 2);
 pane.add(l3, 0, 3);
 pane.add(tf3, 1, 3);
 pane.add(l4, 0, 4);
 pane.add(my_result, 1, 4);
 // call on the labels and text fields to be placed into the window
 // must be done individually so that location and order can be set by column/row

 Button calc_button = new Button("Calculate it!");
 pane.add(calc_button, 1, 5);
 // make a button and put it in the Gridpane

 BorderPane borderPane = new BorderPane();
 borderPane.setCenter(pane);

 Scene scene = new Scene(borderPane, 500, 500);
 primaryStage.setTitle("Financial Calculator");
 primaryStage.setScene(scene);
 primaryStage.show();

 calc_button.setOnAction(e -> {
 my_result.setText("");
 });

}