Quasar CSS Positioning Classes
There are CSS classes supplied by Quasar to help you position a DOM element easily:
Class Name | Description |
---|
float-left /pull-left | Float to the left |
float-right /pull-right | Float to the right |
fullscreen | Fix position covering all window real-estate |
fixed | Set position to fixed without specifying top , left , right or bottom properties |
absolute | Set position to absolute without specifying top , left , right or bottom properties |
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 |
relative-position | Set position to relative |
Alignment
Class Name | Description |
---|
float-left /pull-left | Float to the left |
float-right /pull-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 |
Vertical alignment:
Class Name | Description |
---|
vertical-top | Set vertical alignment to top |
vertical-middle | Set vertical alignment to middle |
vertical-bottom | Set vertical alignment to bottom |