locate an hbox to the center of a cell in a javafx2 gridpane

Question

I am trying everything, but this hbox does not want to move down the cell, here is a screenshot

The top left hbox located inside the gridbox cell 0 column 0 defined in the code below refuses to move to the center of the cell!! i have tried ever code. please help

here is the code

    GridPane prayertime_pane = new GridPane();

    prayertime_pane.setGridLinesVisible(true);

    HBox fajrBox = new HBox();
    fajrBox.setSpacing(0);
    fajrBox.setAlignment(Pos.BOTTOM_CENTER);
    fajrBox.getChildren().addAll(fajr_hourLeft, fajr_hourRight, time_Separator1, fajr_minLeft, fajr_minRight);


    HBox zuhrBox = new HBox();
    zuhrBox.setSpacing(0);
    zuhrBox.getChildren().addAll(zuhr_hourLeft, zuhr_hourRight, time_Separator2, zuhr_minLeft, zuhr_minRight);


    HBox asrBox = new HBox();
    asrBox.setSpacing(0);
    asrBox.getChildren().addAll(asr_hourLeft, asr_hourRight, time_Separator3, asr_minLeft, asr_minRight);


    HBox maghribBox = new HBox();
    maghribBox.setSpacing(0);
    maghribBox.getChildren().addAll(maghrib_hourLeft, maghrib_hourRight, time_Separator4, maghrib_minLeft, maghrib_minRight);


    HBox ishaBox = new HBox();
    ishaBox.setSpacing(0);
    ishaBox.getChildren().addAll(isha_hourLeft, isha_hourRight, time_Separator5, isha_minLeft, isha_minRight);


    TextFlow fajrtextFlow = new TextFlow();
    Text text1 = new Text("الفجر\nFajr");
    text1.setId("prayer-text");
    fajrtextFlow.getChildren().addAll(text1);

    TextFlow duhrtextFlow = new TextFlow();
    Text text2 = new Text("الظهر");
    text2.setId("prayer-text");
    duhrtextFlow.getChildren().addAll(text2);

    TextFlow asrFlow = new TextFlow();
    Text text3 = new Text("العصر");
    text3.setId("prayer-text");
    asrFlow.getChildren().addAll(text3);

    TextFlow maghribFlow = new TextFlow();
    Text text4 = new Text("المغرب");
    text4.setId("prayer-text");
    maghribFlow.getChildren().addAll(text4);

    TextFlow ishaFlow = new TextFlow();
    Text text5 = new Text("العشاء");
    text5.setId("prayer-text");
    ishaFlow.getChildren().addAll(text5);


    prayertime_pane.setAlignment(Pos.BOTTOM_CENTER);
    prayertime_pane.add(fajrBox, 0, 0);
    prayertime_pane.add(zuhrBox, 0, 1);
    prayertime_pane.add(asrBox, 0, 2);
    prayertime_pane.add(maghribBox, 0, 3);
    prayertime_pane.add(ishaBox, 0, 4);

    prayertime_pane.add(fajrtextFlow, 2, 0);
    prayertime_pane.add(duhrtextFlow, 2, 1);
    prayertime_pane.add(asrFlow, 2, 2);
    prayertime_pane.add(maghribFlow, 2, 3);
    prayertime_pane.add(ishaFlow, 2, 4);


    prayertime_pane.setPadding(new Insets(40, 40, 40, 40));
    prayertime_pane.setVgap(20);
    prayertime_pane.setHgap(20);

also included is the css to my code

     #prayertime_pane{

        -fx-background-color: rgba(0, 0, 0, 0.25); 
        -fx-background-radius: 10;
        -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );       
        -fx-border-color: blue;
        -fx-border-insets: 5;
        -fx-border-width: 3;
        -fx-border-style: dashed;
        -fx-text-alignment: right;
        -fx-graphic-vpos: center;
        -fx-node-vpos: center;

    }

    #prayer-text {
   -fx-font-size: 28px;
   -fx-font-family: "Arial Black";
   -fx-fill: white;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
   /*-fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );*/ 
   -fx-text-alignment: right;

Answer 1

You can set the alignment for the individual cell/node by using static methods of GridPane:

GridPane.setValignment(fajrBox, VPos.CENTER);

However it is obvious that you actually want the cells in the first column to be aligned center vertically, in that case use RowConstraints:

int numberOfSalatsPerDay = 5;
for (int i = 0; i < numberOfSalatsPerDay; i++) {
    RowConstraints row = new RowConstraints();
    row.setValignment(VPos.CENTER);
    prayertime_pane.getRowConstraints().add(row);
}

Managing the row or column cells all together is preferable in your use case. For more row/column/cell settings (minWidth, prefWidth, maxWidth, percentHeight, h and v grow, h and v alignment, fillWidth etc.) investigate GridPane, RowConstraints and ColumnConstraints.

Additionally there is no css attributes like "-fx-graphic-vpos: center; -fx-node-vpos: center;" in JavaFX. Refer to JavaFX CSS Reference Guide before guessing yourself.