多语言展示
当前在线:588今日阅读:195今日分享:41

CSS基础——文字对齐样式

CSS基础——文字对齐样式
方法/步骤
1

文字对齐分为横向对齐和纵向对齐,横向对齐是指水平方向上,文字在给定的区域宽度(设置宽度的HTML元素,如div、table等元素)内采用的对齐方式,纵向对齐是指竖直方向上,文字在给定的区域高度(设置高度的HTML元素,如td、textarea等元素,不支持div元素)内采用的对齐方式。横向对齐的样式标签是text-align,纵向对齐的样式标签是vertical-align。text-align(横向对齐)text-align样式用于设置文字在水平方向上,在给定的区域宽度内采用的对齐样式。text-align样式的设置采用关键字法,关键字有left、center、right、justify、inherit。left是文字在给定的区域宽度内左对齐,即文字(单行或多行文字)在给定的区域宽度内,从区域的左边开始排列;center是文字在给定的区域宽度内居中对齐,即文字(单行或多行文字)在给定的区域宽度内,从区域的中间开始排列;right是文字在给定的区域宽度内居右对齐,即文字(单行或多行文字)在给定的区域宽度内,从区域的右边开始对齐;justify是文字在给定的区域宽度内两端对齐,即文字(单行多行文字)在给定的区域宽度内,撑满区域的宽度。下面的HTML文档展示了text-align样式的使用方法。

2

在上面的网页代码中,使用了表格元素,表格单元的宽度为300像素,表格单元内的内容按照给出的text-align样式进行排版显示。浏览器显示效果如下图所示。

3

vertical-align(纵向对齐)vertical-align样式用于设置文字在竖直方,向上,在给定的区域高度内采用的对齐样式。该样式定义区域内文字的基线相对于区域高度的垂直对齐方式,文字基线是指文字所用字体的基准线,不是文字最底部的线,下图所示的蓝色线条就是文字的基线。

5

在上面的网页代码中,td元素分别设置了vertical-align样式,td元素的内容按照设置的vertical-align样式排版显示。浏览器显示效果如下图所示。

推荐信息