There are CSS classes supplied by Quasar to help you position a DOM element easily:
| Class Name | Description |
|---|---|
fullscreen | Fix position covering all window real-estate |
fixed | Set position to fixed without specifying top, left, right or bottom properties |
fixed-center | Set position to fixed but in the middle of window. |
absolute | Set position to absolute without specifying top, left, right or bottom properties |
absolute-center | Set position to absolute but in the middle of the container (container needs relative position). |
fixed-top absolute-top | Fixed or absolute position to top of screen |
fixed-right absolute-right | Fixed or absolute position to the right edge of screen |
fixed-bottom absolute-bottom | Fixed or absolute position to bottom of screen |
fixed-left absolute-left | Fixed or absolute position to the left edge of screen |
fixed-top-left absolute-top-left | Fixed or absolute position to top left of screen |
fixed-top-right absolute-top-right | Fixed or absolute position to top right of screen |
fixed-bottom-left absolute-bottom-left | Fixed or absolute position to bottom left of screen |
fixed-bottom-right absolute-bottom-right | Fixed or absolute position to bottom right of screen |
fixed-full absolute-full | Fixed or absolute position to all screen edges |
relative-position | Set position to relative |
Alignment
| Class Name | Description |
|---|---|
float-left | Float to the left |
float-right | Float to the right |
on-left | Sets a small margin to the right; commonly used for icon elements with other siblings |
on-right | Sets a small margin to the left; commonly used for icon elements with other siblings |
TIP
Instead of using float-left or float-right we recommend that you read on the Quasar Grid System.
Vertical alignment:
| Class Name | Description |
|---|---|
vertical-top | Set CSS vertical alignment to top |
vertical-middle | Set CSS vertical alignment to middle |
vertical-bottom | Set CSS vertical alignment to bottom |