title: How to set proper alignment in JavaFX
body: <p>I want to create JavaFX example similar to this dialog:</p>
  
  <p><img src="https://i.stack.imgur.com/UwuZx.png" alt="enter image description here"></p>
  
  <p>I created this code:</p>
  
  <pre><code>public void aboutDialogPanel()
      {
  
          final Stage aboutDialog = new Stage();
          aboutDialog.initModality(Modality.WINDOW_MODAL);
  
          HBox phbox = new HBox();
          phbox.setAlignment(Pos.CENTER);
          // Image
          ImageView iv = new ImageView(getClass().getResource("/images/splash.png").toExternalForm());
          phbox.getChildren().add(iv);
  
          HBox hbox = new HBox();
          // Text Area
          TextArea dataPane = new TextArea();
          dataPane.setEditable(false);
          dataPane.setLayoutX(160);
          dataPane.setLayoutY(160);
          hbox.setAlignment(Pos.CENTER);
          hbox.setSpacing(1);
          hbox.setPadding(new Insets(10, 0, 10, 0));
          hbox.getChildren().add(dataPane);
  
          HBox bhbox = new HBox();
          // Close Button
          Button closeButton = new Button("Close");
  
          closeButton.setOnAction(new EventHandler&lt;ActionEvent&gt;()
          {
              @Override
              public void handle(ActionEvent arg0)
              {
                  // Close the dialog when "Close" button is pressed
                  aboutDialog.close();
              }
          });
  
          bhbox.setAlignment(Pos.CENTER);
          bhbox.setSpacing(10);
          bhbox.setPadding(new Insets(10, 10, 10, 10));
          bhbox.getChildren().add(closeButton);
  
          BorderPane borderpane = new BorderPane();
          borderpane.setTop(phbox);
          borderpane.setCenter(hbox);
          borderpane.setBottom(bhbox);
  
          // Configure dialog size and background color
          Scene aboutDialogScene = new Scene(borderpane, 600, 500, Color.WHITE);
          aboutDialog.setScene(aboutDialogScene);
          aboutDialog.show();
      }
  </code></pre>
  
  <p>But I cannot reproduce the same alignment similar to to the picture. Can you tell me how I can fix the layout of my code?</p>
  
  <p><strong><em>UPDATE</em></strong></p>
  
  <p>This is the visual result:</p>
  
  <p><img src="https://i.stack.imgur.com/5B6nx.png" alt="enter image description here"></p>
  
  <p>The text field is always restricted on left and right.</p>