文本对齐
使用 CSS 类来修改文本的对齐方式:
类 描述 实例
.text-left 左对齐文本 尝试一下
.text-right 右对齐文本 尝试一下
.text-center 居中 尝试一下
.text-justify 两端对齐 尝试一下
不同尺寸屏幕的对齐
使用 CSS 类来修改文本的不同尺寸屏幕的对齐方式:
类 描述 实例
左对齐
.small-text-left 所有尺寸屏幕左对齐 尝试一下
.small-only-text-left 小尺寸屏幕左对齐(宽度小于 40em ) 尝试一下
.medium-text-left 宽度大于 40.0625em 尺寸屏幕左对齐 尝试一下
.medium-only-text-left 宽度在 40.0625em 到 64em 尺寸的屏幕左对齐 尝试一下
.large-text-left 宽度大于 64.0625em 尺寸屏幕左对齐 尝试一下
.large-only-text-left 宽度在 64.0625em 到 90em 尺寸的屏幕左对齐 尝试一下
.xlarge-text-left 宽度大于 90.0625em 尺寸屏幕左对齐 尝试一下
.xlarge-only-text-left 宽度在 90.0625em 到 120em 尺寸的屏幕左对齐 尝试一下
.xxlarge-text-left 宽度大于 120em 尺寸屏幕左对齐 尝试一下
右对齐
.small-text-right 所有尺寸屏幕右对齐 尝试一下
.small-only-text-right 小尺寸屏幕右对齐(宽度小于 40em ) 尝试一下
.medium-text-right 宽度大于 40.0625em 尺寸屏幕右对齐 尝试一下
.medium-only-text-right 宽度在 40.0625em 到 64em 尺寸的屏幕右对齐 尝试一下
.large-text-right 宽度大于 64.0625em 尺寸屏幕右对齐 尝试一下
.large-only-text-right 宽度在 64.0625em 到 90em 尺寸的屏幕右对齐 尝试一下
.xlarge-text-right 宽度大于 90.0625em 尺寸屏幕右对齐 尝试一下
.xlarge-only-text-right 宽度在 90.0625em 到 120em 尺寸的屏幕右对齐 尝试一下
.xxlarge-text-right 宽度大于 120em 尺寸屏幕右对齐 尝试一下
居中对齐
.small-text-center 所有尺寸屏幕居中对齐 尝试一下
.small-only-text-center 小尺寸屏幕居中对齐(宽度小于 40em ) 尝试一下
.medium-text-center 宽度大于 40.0625em 尺寸屏幕居中对齐 尝试一下
.medium-only-text-center 宽度在 40.0625em 到 64em 尺寸的屏幕居中对齐 尝试一下
.large-text-center 宽度大于 64.0625em 尺寸屏幕居中对齐 尝试一下
.large-only-text-center 宽度在 64.0625em 到 90em 尺寸的屏幕居中对齐 尝试一下
.xlarge-text-center 宽度大于 90.0625em 尺寸屏幕居中对齐 尝试一下
.xlarge-only-text-center 宽度在 90.0625em 到 120em 尺寸的屏幕居中对齐 尝试一下
.xxlarge-text-center 宽度大于 120em 尺寸屏幕居中对齐 尝试一下
两端对齐
.small-text-justify 所有尺寸屏幕都两端对齐 尝试一下
.small-only-text-justify 小尺寸屏幕两端对齐(宽度小于 40em ) 尝试一下
.medium-text-justify 宽度大于 40.0625em 尺寸屏幕两端对齐 尝试一下
.medium-only-text-justify 宽度在 40.0625em 到 64em 尺寸的屏幕两端对齐 尝试一下
.large-text-justify 宽度大于 64.0625em 尺寸屏幕两端对齐 尝试一下
.large-only-text-justify 宽度在 64.0625em 到 90em 尺寸的屏幕两端对齐 尝试一下
.xlarge-text-justify 宽度大于 90.0625em 尺寸屏幕两端对齐 尝试一下
.xlarge-only-text-justify 宽度在 90.0625em 到 120em 尺寸的屏幕两端对齐 尝试一下
.xxlarge-text-justify 宽度大于 120em 尺寸屏幕两端对齐