Align
Align centers one child horizontally and vertically within the space offered by its parent.
It is a layout primitive for the very common case where you have exactly one piece of content and want it centered. That could be an empty state, a spinner, a hero message, or a small card placed in a larger panel.
Use Align when centering is the main job. Do not use it for multi-child layout, for edge pinning, or for spacing between siblings. Those are better handled by Row, Column, or Positioned.
Example
use fission::core::ui::{Align, Text};
let node = Align::new(
Text::new("Nothing here yet").into_node(),
)
.into_node();
The child keeps its own natural size. Align changes where that child sits inside the parent, not what the child renders.
Field table
| Field | Type | Meaning | Notes / default behavior |
|---|---|---|---|
id | Option<NodeId> | Stable node identity. | Defaults to None, so the runtime generates an id. |
child | Box<Node> | The node to center. | Required. Align is a single-child layout wrapper. |
Layout behavior
When the parent gives bounded width or height, Align expands to that available size and centers the child inside it. When the axis is unbounded, Align falls back to the child's size on that axis. That makes it suitable both for full-panel centering and for smaller local centering inside reusable components.
If you want the same centering behavior through a higher-level convenience widget, use Center. If you need cross-axis control in a larger layout rather than one centered child, prefer the alignment controls on Row or Column.
Specific advice
Align is a good choice when you want intent to be obvious in code. A centered child inside an Align is easier to read than manually building containers and spacers to fake centering.