文本样式
color/text-align/vertical-align/direction 文本颜色与对齐
文本样式
color/text-align/vertical-align 控制文字的颜色与对齐方式。
学完本章你将： 掌握 color、text-align、vertical-align、direction。
文字颜色
css
.text-color { color: #333; }
.text-color { color: rgb(51, 51, 51); }
.text-color { color: rgba(51, 51, 51, 0.8); }水平对齐
css
.left { text-align: left; } /* 左对齐（默认） */
.center { text-align: center; } /* 居中 */
.right { text-align: right; } /* 右对齐 */
.justify { text-align: justify; } /* 两端对齐 */垂直对齐
css
/* vertical-align 只对行内元素/表格单元格生效 */
img { vertical-align: middle; } /* 图片与文字居中对齐 */
.baseline { vertical-align: baseline; } /* 基线对齐（默认） */
.top { vertical-align: top; } /* 顶部对齐 */
.bottom { vertical-align: bottom; } /* 底部对齐 */
.middle { vertical-align: middle; } /* 中间对齐 */
/* 像素偏移 */
.offset { vertical-align: 5px; } /* 向上偏移 */
.offset-down { vertical-align: -5px; } /* 向下偏移 */文字方向
css
.ltr { direction: ltr; } /* 从左到右（默认） */
.rtl { direction: rtl; } /* 从右到左（阿拉伯语等） */