The -fx-text-alignment JavaFX CSS property allows developers to horizontally align the text contents of a Text or Labelled node, such as a Button or Label when multiple lines of text are displayed. -fx-text-alignment supports the following values: left, right, justified and center. The text alignment property will set the relative position of multiple lines of text relative to the text bounds.

-fx-text-alignment won’t have any effect on a control where there’s only one line of text. Check out the behaviour note below to see why.

Behaviour

Two aspects of the -fx-text-alignment are worth noting:

  • Alignment within controls:

The -fx-text-alignment CSS property will horizontally align text within the bounds of a control, such as a Label.

The default behaviour of some controls is to wrap the size of the control to the size of the content. To over-write this behaviour, set the maximum width of the Label to Region.MAX_SIZE.

  • Alignment of single-line content

The -fx-text-alignment CSS property does not apply to nodes in which there is a single line of text. The alignment in these cases should be set using -fx-alignment (if the text bounds stretch to fill an area) or by positioning the text within a layout pane.

Syntax

/* Keyword values */
-fx-text-alignment: left;
-fx-text-alignment: right;
-fx-text-alignment: center;
-fx-text-alignment: justify;

/* Global values */
-fx-text-alignment: inherit;

This property refers only to the horizontal alignment of text. Text direction and vertical alignment are not accessible by CSS, although the vertical position can be altered by using -fx-text-origin.

Values

The JavaFX CSS interpreter isn’t a fully-compliant CSS Interpreter, nor does it support all CSS-values you might expect for the related CSS property.

-fx-text-alignment can have the following values:

ValueDescription
leftAligns multiple lines of text to the left of the text bounds
rightAligns multiple lines of text so that the right hand side of each line s aligned with the right of the text bounds
centerAligns multiple lines of text so the center of each line is aligned with the centre of the text bounds
justifyAligns multiple lies of text so the left of each line aligns with the left of the bounds, and the right of the line aligns with the right of the bounds. Additional apace between words is distributed equally.

Example

-fx-text-alignment can be used to align multi-line text in a wrapped test area such as a Text node or Label

CSS:

.label{
  -fx-background-color:  #fcc200;
  -fx-text-alignment: right;
}

FXML:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane prefHeight="250.0"
            prefWidth="300.0"
            xmlns="http://javafx.com/javafx/10.0.2-internal">

    <Label text="This label text is so long it needs to be on multiple lines. Don't forget to specify text wrapping" 
           wrapText="true"
           AnchorPane.leftAnchor="10" 
           AnchorPane.rightAnchor="10" 
           AnchorPane.topAnchor="10.0" />
</AnchorPane>

See Also