The -fx-alignment JavaFX CSS property sets the distribution of space around child nodes in the following JavaFX layout panes:

  • FlowPane
  • GridPane
  • HBox
  • StackPane
  • TilePane
  • VBox

The -fx-alignment property does not control spacing between elements, which is controlled by the -fx-spacing property.

Warning

This JavaFX CSS property has the associated warnings:

Expansion:

Just watch out, because the alignment of children within a layout pane is only performed within the bounds of that container.

Although most layout panes will expand to fill the size of their Parent (or the Scene itself), some layout panes will wrap to the size of their content. For example the VBox will by default wrap horizontally around its content. This behaviour can be overridden by setting -fx-fill-width to true.

The -fx-alignment JavaFX CSS property sets the distribution of space around child nodes in layout panes

As the default background of layout panes is transparent, this can be difficult to diagnose. A reasonable way to work out the bounds of your layout pane is to set the background color. This can be done using the -fx-background-color property.

-fx-background-color: red;

If a node isn’t expanding, this can often be solved by setting the maximum width or height of the node to Region.MAX_SIZE. This conveys to JavaFX that the region should be resized above its preferred width.

In the case of the GridPane, ColumnConstraint and RowConstraint object should be used.

The GridPane will not, by default, expand as its container does

Please see the Eden Coding guide to using layout panes for more information on how to use these effectively.

Behaviour

Content is first packed based on the layout bounds of each individual node, using the rules of -fx-alignment. Here, -fx-alignment is set to top-left, and we’re packing into a VBox, so contents are packed vertically taking into account the spacing property of the parent, and any remaining horizontal space is distributed to the right of items.

Content is packed within a control based on the spacing of the parent.

Next, the content itself is positioned within the bounds of the parent, taking into account the padding (Insets) associated with the parent. Here, the content is packed into the top-left corner of this layout.

Content is then packed based on the padding of the parent within the available area.

Baseline alignment

Baseline alignment is used to align horizontally-distributed nodes such that the ‘baseline’ of text within each node is on the same horizontal level. This is most effective in layout panes where text-based contents are distributed horizontally

Baseline alignment is used to align horizontally-distributed contents based on the position of their text

Baseline is best described as the line you might draw your letters on when writing. Some letters like ‘g’ and ‘q’ will extend below the baseline, but the main body of those letters still rest on the baseline of the text

Text controls with multiple lines of text will baseline-align based on the baseline of the first line of text

Text controls with multiple lines of text will baseline-align based on the baseline of the first line of text

If no baseline position exists for a node, alignment will default to ensuring the bottom of the non-labelled node aligns with the baseline of labelled nodes

Labelled Nodes

Setting the -fx-alignment CSS property of a labelled node will not align text within that node if the node has multiple lines of text. This is controlled by the -fx-text-alignment property.

Single line text can be aligned within a node such as a Label by setting the -fx-alignment property of the Label, although labelled nodes usually base their own size on the size of the text they contain. For that reason, it’s usually easier to accomplish this effect by positioning the label within a layout pane.

Syntax

/* Center all contents within layout pane */
-fx-alignment: center;

/* Align text-based nodes based on their baseline property 
   Center all content horizontally */
-fx-alignment: baseline-center;

/* See the below Values section for all values of this property */

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-alignment can have the following values:

ValueDescription
top-leftDefault. The contents are placed in the top left corner of the pane
top-centerThe contents are placed at the top, horizontally aligned with the center of the pane.
top-rightThe contents are placed in the top right corner of the pane.
center-leftThe contents are placed in the vertical center, on the left hand side of the pane.
centerThe contents are centred vertically and horizontally.
center-rightThe contents are placed in the vertical center, on the right hand side of the pane.
bottom-leftThe contents are placed in the bottom left corner of the pane
bottom-centerThe contents are placed at the bottom, horizontally aligned with the center of the pane.
bottom-rightThe contents are placed in the bottom right corner of the pane
baseline-leftElements that are distributed horizontally are aligned based on the baseline position of the node. Contents are positioned on the left of the layout pane.
baseline-centerElements that are distributed horizontally are aligned based on the baseline position of the node. Contents are positioned in the center of the layout pane.
baseline-rightElements that are distributed horizontally are aligned based on the baseline position of the node. Contents are positioned on the right of the layout pane.

See Also