Align Text in TextFlow to center - JavaFX FXML & CSS

Question

At the moment I have a piece of text defined with Text in my FXML. It is also located inside a TextFlow which is inside a ScrollPane. I have tried aligning the text to center in the FXML itself and in css but still doesn't seen to be working. Here is the FXML

<ScrollPane fx:id = "scrollPane">
     <content>
         <TextFlow styleClass="txtFlow">
               <children>
                    <Text styleClass="h1" text="Title" textAlignment="CENTER"/>
                    <Text styleClass="h2" text="&#10;Subtitle"/>
              </children>
          </TextFlow>
    </content>
</ScrollPane>

And here is the CSS

.h1{
-fx-font-family: "Helvetica";
-fx-font-size: 50px;
-fx-fill: #147cb0;
-fx-underline: true;
-fx-alignment: center; }

score 1 · Answer 1 · answered May 01 '15 at 12:08

1

To align texts in TextFlow use

<TextFlow textAlignment="CENTER"> .... </TextFlow>

To align the content of ScrollPane use

<ScrollPane fx:id = "scrollPane" fitToWidth="true"> .... </ScrollPane>

answered May 01 '15 at 12:08

Uluk Biy

48,655
13
146
153

Thanks, but what if I want to align only one text element to center? – Josh Beaver May 01 '15 at 18:57
@JoshBeaver, I don't think that is possible. Use another separate Text or TextFlow for title, and align it. – Uluk Biy May 04 '15 at 06:42

score 1 · Answer 2 · answered May 01 '15 at 13:47

Adding to @Uluk's answer, you can also achieve this using css by using the style on the TextFlow.

<TextFlow style="-fx-text-alignment: center;">

You can also get the desired effect by using a css file and a styleclass in it.

<TextFlow styleClass="txtFlow">

and on the css file as,

.txtFlow {
    -fx-text-alignment: center;
}

Align Text in TextFlow to center - JavaFX FXML & CSS

2 Answers2