-fx-alignment JavaFX CSS property sets the distribution of space around child nodes in the following JavaFX layout panes:
-fx-alignment property does not control spacing between elements, which is controlled by the
This JavaFX CSS property has the associated warnings:
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
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
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,
RowConstraint object should be used.
Please see the Eden Coding guide to using layout panes for more information on how to use these effectively.
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.
Next, the content itself is positioned within the bounds of the parent, taking into account the
Insets) associated with the parent. Here, the content is packed into the top-left corner of this layout.
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 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
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
-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
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.
/* 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 */
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:
|top-left||Default. The contents are placed in the top left corner of the pane|
|top-center||The contents are placed at the top, horizontally aligned with the center of the pane.|
|top-right||The contents are placed in the top right corner of the pane.|
|center-left||The contents are placed in the vertical center, on the left hand side of the pane.|
|center||The contents are centred vertically and horizontally.|
|center-right||The contents are placed in the vertical center, on the right hand side of the pane.|
|bottom-left||The contents are placed in the bottom left corner of the pane|
|bottom-center||The contents are placed at the bottom, horizontally aligned with the center of the pane.|
|bottom-right||The contents are placed in the bottom right corner of the pane|
|baseline-left||Elements 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-center||Elements 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-right||Elements that are distributed horizontally are aligned based on the baseline position of the node. Contents are positioned on the right of the layout pane.|