CSS text-align 和 vertical-align 属性

text-align 属性的定义和用法:

text-align 属性规定 元素中的文本水平对齐方式

该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔,可以支持值justify;不同用户代理可能会得到不同的结果。

left : 把文本排列到左边。默认值:由浏览器决定。

right : 把文本排列到右边。

center : 把文本排列到中间。

justify : 实现两端对齐文本效果。

inherit : 规定应该从父元素继承text-align属性的值。


vertical-align 属性的定义和用法:

vertical-align 属性设置 元素的垂直对齐方式

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

baseline : 默认。元素放置在父元素的基线上。

sub : 垂直对齐文本的下标。

super : 垂直对齐文本的上标。

top : 把元素的顶端与行中最高元素的顶端对齐。

text-top : 把元素的顶端与父元素字体的顶端对齐。

middle : 把此元素放置在父元素的中部。

bottom : 把元素的顶端与行中最低的元素的顶端对齐。

text-bottom : 把元素的底端与父元素字体的底端对齐。

length : 垂直对齐文本的下标。

% : 使用“line-height”属性的百分比值来排列此元素。允许使用负值。

inherit : 规定应该从父元素继承vertical-align 属性的值。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,792评论 1 92
  • 有些东西我们经常用,但是我们却并不了解它的原理,所以一旦换了场景,好多东西就不知道该怎么用了。最近一直很纠结ver...
    朱小维阅读 4,994评论 8 34
  • 参考文章:深入了解CSS的line-height属性Vertical-Align: 你需要知道的所有事【译】Ver...
    若邪Y阅读 3,487评论 1 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,612评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,512评论 0 6