Quasar 提供了一些 CSS 类来帮助您轻松定位 DOM 元素:
| 类名 | 描述 |
|---|---|
fullscreen | 固定位置覆盖整个窗口区域 |
fixed | 设置 position 为 fixed,但不指定 top、left、right 或 bottom 属性 |
fixed-center | 设置位置为 fixed 但在窗口中间 |
absolute | 设置 position 为 absolute,但不指定 top、left、right 或 bottom 属性 |
absolute-center | 设置位置为 absolute 但在容器中间(容器需要相对定位) |
fixed-top absolute-top | 固定或绝对定位到屏幕顶部 |
fixed-right absolute-right | 固定或绝对定位到屏幕右边缘 |
fixed-bottom absolute-bottom | 固定或绝对定位到屏幕底部 |
fixed-left absolute-left | 固定或绝对定位到屏幕左边缘 |
fixed-top-left absolute-top-left | 固定或绝对定位到屏幕左上角 |
fixed-top-right absolute-top-right | 固定或绝对定位到屏幕右上角 |
fixed-bottom-left absolute-bottom-left | 固定或绝对定位到屏幕左下角 |
fixed-bottom-right absolute-bottom-right | 固定或绝对定位到屏幕右下角 |
fixed-full absolute-full | 固定或绝对定位到所有屏幕边缘 |
relative-position | 设置位置为 relative |
对齐
| 类名 | 描述 |
|---|---|
float-left | 向左浮动 |
float-right | 向右浮动 |
on-left | 设置右边距;通常用于与其他兄弟元素一起的图标元素 |
on-right | 设置左边距;通常用于与其他兄弟元素一起的图标元素 |
TIP
我们建议您阅读 Quasar 网格系统,而不是使用 float-left 或 float-right。
垂直对齐:
| 类名 | 描述 |
|---|---|
vertical-top | 设置 CSS 垂直对齐为 top |
vertical-middle | 设置 CSS 垂直对齐为 middle |
vertical-bottom | 设置 CSS 垂直对齐为 bottom |