定位hbox中的電池在javafx2 gridpane

Question

我想一切的中心，但這種橫向盒並不想向下移動電池， 這裏是截圖

左上方在下面的代碼中定義的網格框單元0列0中的hbox拒絕移動到單元格的中心！我曾經嘗試過任何代碼。請幫助

這裏是代碼

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); 

還包括爲CSS來我的代碼

 #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

可以使用的GridPane靜態方法設置了單個電池/節點的對齊方式：

GridPane.setValignment(fajrBox, VPos.CENTER); 

然而很明顯，你實際上希望細胞在t他第一列垂直對齊中心，在這種情況下使用RowConstraints：

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

管理行或列單元格一起在您的使用情況較好。對於更多行/列/單元格設置（minWidth，prefWidth，maxWidth，percentHeight，h和v增長，h和v對齊，fillWidth等），請調查GridPane,RowConstraints和ColumnConstraints。

此外，沒有像「-fx-graphic-vpos：center; -fx-node-vpos：center;」這樣的css屬性。在JavaFX中。在猜測自己之前，請參閱JavaFX CSS參考指南。